さあ、「Color Palette Explorer」で、あなたの感性を彩る色を探してみませんか？ 複雑な操作は不要です。

ご紹介する機能

1.  RGBを直感的にコントロール:

    * 画面上のつまみをスライドさせるだけで、赤(Red)、緑(Green)、青(Blue)の各要素を細かく調整できます。

    * 数値の隣のボタンを直接クリックして、数を増減させることも可能です。

    * もちろん、RGBの数値を直接入力して、ピンポイントで色を指定することもできます。

　　…ブラウザにより見た目が違いますが、機能は同じです。

2.  カラーパレットからダイレクトに選択:

    * もし迷ったら、広大なカラーパレットをマウスでクリックしてみてください。きっと、あなたの求める色が見つかるはずです。

    * クリックするたびに、「選択された色」のプレビューがリアルタイムに変化します。納得いくまで、何度でもお試しください。

　　･･･まれに、カラーパレットとスライダーの色が一致しない（カラーパレットの外周部位置）場合がありますが、ご心配なく！(生成されるTabele構造での値は正常値です。)

3.  色の情報を詳細に表示:

    * 選択した色の情報は、「カラー情報」として瞬時に表示されます。

    * 16進数形式（例：#FF0000）とRGB形式（例：rgb(255, 0, 0)）の両方で、色のコードを確認できます。

4.  伝統色名もチェック:

    * あらかじめ登録された豊富な日本の伝統色（和色）と、その英名が表示されます。もし、あなたの選んだ色がこれらの伝統色と合致すれば、美しい色名を知ることができます。

    * 和名が「不明」、英名が「Unknown」と表示された場合でもご心配なく。その色の系統（例：～色系）を入力できるのでメモ代わりに残しておけます。

5.  HTMLテーブル形式で保存:

    * 「クリップボードにコピー」ボタンをワンクリックするだけで、選択した色の情報がHTMLのTable形式でクリップボードに保存されます。

    * 簡単にあなたのウェブページやドキュメントに貼り付けることができます。

さらに、もし伝統色の名前について詳しく知りたくなったら、私が運営しているウェブページ「 [和色パレット：日本の伝統色をRGBで探す｜色名・読み・コードで、1字でも簡単検索]( https://xn--ecka7j.biz/site-operation/design/11851/ ) 」で、後からじっくりと調べて、Table上の「Unknown」な色名を修正したりすることも可能です。

さあ、「Color Palette Explorer」で、あなただけの特別な色を見つけて、あなたの創作活動をより豊かなものにしませんか？

Color Palette Explorer

関連記事

和色パレット：日本の伝統色をRGBで探す｜色名・読み・コードで、1文字でも簡単検索 Sortも系・色名・読み・コード・RGBで

並び替え機能、文字列検索の機能を追加しました。日本の豊かな色彩文化を凝縮。古来より愛されてきた繊細な和色の数々を、1文字の入力でも簡単に探し出せます。「あの時、心惹かれた色はなんという名前だろう？」「このイメージにぴったりの日本の伝統色を見...

イイネ.biz

2025.06.05

編集後記(備忘録)

顛末記

ハマった！Webサイト公開直前の落とし穴 - Geminiと挑んだ原因不明エラー解決記

Webサイト公開直前に遭遇した、原因不明のConsoleエラーとの壮絶な格闘記。頼れるはずの生成AI「Gemini」に助けを求めるも、その道のりは困難の連続。最終的に問題解決へと導いたのは、意外な場所へのコード移動というアナログな方法だった。AIの可能性と限界、そしてWeb開発における予期せぬトラブルの面白さを描いた、エンジニア必読の顛末。

イイネ.biz

2025.05.28

変更履歴

心を彩る、和色とカラーコードの調べ - あなただけの色彩パレット

Webサイトやブログで「もう少しだけ、この色を添えたい」と思ったことはありませんか？ 微妙なニュアンスを表現できるグラデーションカラーは、デザインの可能性を無限に広げてくれます。 しかし、色の選択は時に迷路のよう。 例えば、同じカラーコード #00FFFFでも、 ※．アクア 「 Aqua」や、シアン 「 Cyan」といった異なる呼び名が存在します。 また、「Medium spring green」のように、同じ名前でも ※．「 Medium_springgreen　」#00FA9A：（薄い緑系）と、 ※．「 Medium_Spring_Green」#348017：（濃い緑系）のように、カラーコードが異なる場合もあります。 日本の伝統色である和色は、その繊細な色合いと美しい名称で、私たちの心を魅了します。 ※．「濃紺」：「 のうこん」#1F2F54で「 Navy blue」とも呼ばれますが、 ※．「 Navy」または、「 Navy blue」でも #000080という別の色も存在します。 瑠璃紺：※． るりこん：#19448E　と、 紺瑠璃：※． こんるり：#213380のように、似たような名前でもわずかに異なる色合いを持つ和色は、日本文化の奥深さを感じさせます。

イイネ.biz

2026.01.10

もえぎいろ と 抹茶色

もえぎいろ と 抹茶色 は 同じような色合いです。
もえぎには、萌黄、萌木、萌葱と３つの異なる（黄・木・葱）で表し、萌葱色の#adb367と抹茶色の#adb367は、同コード色名違いで同色です。

空色 と 水色

空色と水色にも、同コード別名が存在します。（#87ceeb）

同色・異名、異色・同コードの確認方法

次のブログカードのクリックから、コード（#16進またはRGB）で並び替えたり、読み方で並び替えた後に、読み方で検索すると、それぞれの色を見分けたり、異名。同コードの和色（わしょく・わいろ：日本の伝統色の機微）を確認したりできます。

和色パレット：日本の伝統色をRGBで探す｜色名・読み・コードで、1文字でも簡単検索 Sortも系・色名・読み・コード・RGBで

並び替え機能、文字列検索の機能を追加しました。日本の豊かな色彩文化を凝縮。古来より愛されてきた繊細な和色の数々を、1文字の入力でも簡単に探し出せます。「あの時、心惹かれた色はなんという名前だろう？」「このイメージにぴったりの日本の伝統色を見...

イイネ.biz

2025.06.05

日本の豊かな色彩文化を凝縮。古来より愛されてきた繊細な和色の数々を、1文字の入力でも簡単に探し出せます。

「あの時、心惹かれた色はなんという名前だろう？」「このイメージにぴったりの日本の伝統色を見つけたい」
そんなあなたの想いを、「和色大辞典」が鮮やかに叶えます。日本の豊かな自然や繊細な文化から生まれた、奥ゆかしい「和色」。その一つひとつには、美しい名前と、情感豊かな物語が込められています。「和色大辞典」 – あなたの感性を彩る、日本の伝統色検索ツール
➡ テーブル内「文字列検索」を追加しました。

主な機能

• 和色を中心に：和色の色合い順に表示する機能を追加
• 一目瞭然のカラー表示: お探しの色をダイレクトに表示。RGB値も併記し、デザインワークを強力にサポートします。
• 日本の伝統色を網羅: 奥ゆかしい色名と、その色に込められた物語に触れることができます。日本の季節や情景を映し出す、多彩な和色の魅力をご堪能ください。
• スマートな並び替え機能:
  • 読み方: ひらがな順に並び替え、微妙な色合いの違いをスムーズに比較できます。
  • 色名: 漢字順に並び替え、共通のイメージを持つ色をまとめてチェックできます。
  • #16進: カラーコード順に並び替え、デジタルデータでの管理に最適です。
  • RGB: 数値順に並び替え、色の構成要素からのアプローチも可能です。
  • デフォルト表示: [F5]キーを押すだけで、読み方順の基本表示に戻ります。
• 文字列検索：
  • 漢字、ひらがな、英数字の文字列検索を追加しました。

和色とは:

単なる色ではありません。それは、日本の風土、歴史、そして繊細な感性が育んだ、唯一無二の色彩体系です。同じ読みを持つ色の中にも、わずかながら異なる色合いが存在し、そこには日本の自然や文化に対する深い理解が込められています。

さあ、「和色パレット」で、あなたの感性を彩る特別な色を見つけてください。

表の表示切替操作ご案内

「和色大辞典」なら、探したい色をスピーディーに見つけることができます。
和色のRGB値も一目でわかるから、デザインワークにも即座に活用できます。

さらに、便利な並び替え機能（Sort）で、色の新たな魅力と出会えます。

• 「読み方」順: 似た響きの美しい色が、まるで隣り合うように現れます。
• 「系」：主に和色の系統（和色優先のため同系色でも離れて表示されます）近しい色合いに並び替えます。
• 「色名」順: 同じ漢字を持つ色が集い、色の奥深さを再発見できます。
• 「#16進数」順: デジタルコードのグラデーションが、色の科学的な側面を映し出します。
• 「RGB」順: 色の成分による並び替えで、微妙な色彩の違いを繊細に感じ取れます。

迷ったら[F5]キー。一瞬で、日本の色彩美が織りなすデフォルトの並び順へ戻ります。

「和色大辞典」は、単なるカラーコードの検索ツールではありません。それは、日本の繊細な美意識に触れ、あなたの感性を豊かにする、新しい色の体験です。

さあ、「和色大辞典」で、あなただけの特別な「色」を見つけてください。

それでは、各項目の見出し位置をクリックした場合の、実際の表示を順を追ってみましょう。（見出しとは、🔶マークで示した部分です）

各クリックは１回目と２回目の表示の違いを次の画像で示します。３回目以降は繰り返し表示となり、「F5」キーで初期状態に戻ります。（実際の体験は「和色大辞典」からどうぞ！）

🔶 読み Sort

① 初期画面または「F5」キー押下時：読みの昇順で表示されます。
② 「読み」を1回クリック：読みの降順で表示されます。
③ 「読み」を再度クリック：読みの昇順で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

①初期表示または「F5」キー、および繰り返し時に

②「読み」を1回クリック、および繰り返し時に

③「読み」を再度クリック、および繰り返し時に

まっちゃいろ　抹茶色
抹茶色だけでこんなにも･･･日本の色：和色の不思議

🔶系 Sort

① 「系」を1回クリック：「系」の漢字コード順（昇順）で表示されます。

② 「系」を再度クリック：「系」の漢字コード順（降順）で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

🔶#16進 Sort

① 「#16進」を1回クリック：16進数のコードの昇順で表示されます。

② 「#16進」を再度クリック：16進数のコードの降順で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

🔶色名 Sort

① 「色名」を1回クリック：色名の漢字コード順（昇順）で表示されます。

② 「色名」を再度クリック：色名の漢字コード順（降順）で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

🔶RGB Sort

① 「RGB」を1回クリック：RGBのコードの昇順で表示されます。

② 「RGB」を再度クリック：RGBのコードの降順で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

文字列の検索機能は、表(Table)内の文字を探す場合、

文字列の検索

例えば、
色の系統の一部、#16進の一部、色名・読みの一部、RGBコードの一部の指定でも、合致したものがあれば、その列を反転表示させます。
並んでいなくても合致した文字列を含む全てのセルは反転表示されます。
　に進む

　「和色大辞典」_Top

和色大辞典

文字列検索

　テーブル内検索➡以下の[___]内に検索文字を入力してください。

　　一致件数: 0 件
該当するセル(位置)が黒色反転し、最初の文字列のテーブル最下段に位置送りします。[漢字]変換の場合は、2度[Enter]キーを押下する必要がある（1度目は漢字の確定）事が必要です。
一致する全ての文字列のセルが反転しますので、並んでいなくてもテーブルをスクロールすることで確認できます。もちろんSort後でも「検索」できます。

パソコン表示の場合、
テーブルの左端下部に浮動表示されるのクリックで
いつでも[___]内の検索文字入力の位置に戻ることができます。

並び替え_Sort

　に戻る

　Table_Topに戻る

CSSアニメーションの可能性を最大限に引き出し、目を奪うような3Dエフェクトを作成してみましょう。

Code欄に👍(カーソル)を置くことで現れる、のクリックでクリップボードにCopyできます。

Cube 00

静止状態のCube。実定義は３面(３Face)のみ
背景色は、HTML側でbackground-color:で指定

Cube 00 HTML

<div class="container0317">
 <section style="background-color:aqua;">
  <cube0317>
   <face0317 class="left--0317"></face0317>
   <face0317 class="top---0317"></face0317>
   <face0317 class="right-0317"></face0317>
  </cube0317>
 </section>
</div> 

Cube 00 css

.container0317{
    height: 60vh;           /* height: 100vh; */
    margin: 0;              /* デフォルトのmarginを削除 */
  /*overflow: hidden;  スクロールバーを非表示 */
    display: flex;          /* フレックスボックスレイアウト */
    flex-direction: column; /* .container0317内でCubeを横に並べる場合は、ここをコメントアウト */  
}
section {
  flex: 1;                  /* 残りのスペースを埋める */
  display: flex;            /* フレックスボックスレイアウト */
  justify-content: center;  /* 水平方向中央揃え */
  align-items: center;      /* 垂直方向中央揃え */
  pointer-events: none;     /* マウスイベントを無効化 */
  overflow: hidden;         /* コンテンツがはみ出さないようにする */
}
cube0317 {
    position: relative;
    width:  30vmin; /* width:  45vmin; 幅をビューポートの最小サイズに基づいて設定 */
    height: 30vmin; /* height: 45vmin; 高さをビューポートの最小サイズに基づいて設定 */  
    transform: rotateX(-45deg) rotateY(45deg);  /* 立方体を回転 */
    transform-origin: 50% 50% -22.5vmin;        /* 回転の中心を設定 */
    transform-style: preserve-3d;               /* 3D変形を保持 */
}
face0317 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;                          /* 親要素いっぱいに広げる */
    background-blend-mode: multiply;    /* 背景の合成モード */
    border: 2px solid;                  /* 境界線を表示 border: 5px solid;  */
    box-sizing: border-box;             /* ボーダーを含めてサイズ計算 */
    animation: rainbow-border05s 05s linear infinite; } /* 虹色の境界線アニメーション */
@keyframes     rainbow-border05s {
    0%  {border-image: radial-gradient(to right,red,orange,yellow,green,blue,indigo,violet) 1; }
    100%{border-image: radial-gradient(to right,violet,indigo,blue,green,yellow,orange,red) 1; }
}
/*CSS グラデーションは <gradient> データ型で表現され、 2 つ以上の色の間の連続的な変化から成る <image> の特殊型です。
    グラデーションは 3 種類から選択することができます。
    線形 (linear) (linear-gradient() 関数によって生成)、
    放射 (radial) (radial-gradient() 関数によって生成)、
    扇形 (conic) (conic-gradient() 関数によって生成) の 3 種類です。 
    repeating-linear-gradient(), 
    repeating-radial-gradient(), 
    repeating-conic-gradient() の各関数によって、反復グラデーションを生成することもできます。*/

Cube 00′

静止状態のCube。実定義は３面(３Face)のみ
背景色は、cssのClassで指定
３Faceの定義は、Cube 00と同じ、しかも<cube0317>以降の定義も同じなのに、
Cube面のグラデーションの色合いが異なる。
その理由は、以下のcss定義の違いを参照してください。

Cube 00′ HTML

<div class="container0317">    
 <section class="dark0317">
  <cube0317>
   <face0317 class="left--0317"></face0317>
   <face0317 class="top---0317"></face0317>
   <face0317 class="right-0317"></face0317>
  </cube0317>
 </section>
</div>

Cube 00′ css

既出のcss分は、省略しています。

.dark0317 {
    background:darkblue;
}
.dark0317 face0317 {
    background-blend-mode: screen;    /* 背景の合成モード */
    background-color: #10027d;      /* 背景色 */
}
.dark0317 face0317.left0317  {
    background-image: linear-gradient(transparent, #00f), linear-gradient(90deg, transparent, #f00);}
.dark0317 face0317.top0317   {
    background-image: linear-gradient(transparent, #f00), linear-gradient(90deg, transparent, #0f0);}
.dark0317 face0317.right0317 {
    background-image: linear-gradient(transparent, #00f), linear-gradient(90deg, transparent, #0f0);}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    cube0317 {width:  60vmin; height: 60vmin; } }
@media screen and (max-width: 480px) {
    cube0317 {width:  70vmin; height: 70vmin; } } /* width:  80vmin; */ /* height: 80vmin; */

Cube 1

Front Back Right Left Top Bottom　背景色虹色：主に線形linear-gradient

Cube 1 HTML

<div class="container0317">
 <div style="color:blue;background-color:aqua;"> Front Back Right Left Top Bottom　背景色虹色：主に線形linear-gradient</div>   
 <section style="background-color:blue;">
  <div class="rotate_cj031g cube_cj031g">
   <div class="front-031g">Front</div>
   <div class="back--031g">Back</div>
   <div class="right-031g">Right</div>
   <div class="left--031g">Left</div>
   <div class="top---031g">Top</div>
   <div class="bottom031g">Bottom</div>
  </div>
 </section>
</div> 

Cube 1 css

既出のcss分は、省略しています。

.rotate_cj031g {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_cj031g32s 32s linear infinite alternate; 
}
@keyframes    rotate_cj031g32s { 
	0%  {transform:rotateX( 360deg) rotateY(-270deg) rotateZ(-180deg);} 
	100%{transform:rotateX(-180deg) rotateY( 180deg) rotateZ( 360deg);} }
.cube_cj031g {
    margin:50px; 
    width: 300px; 
    height:300px; 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg);  }
.cube_cj031g div  {
    width:  98%; /* 100%で隙間無し */
    height: 98%; /* 100%で隙間無し */ 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px;
}
.cube_cj031g .front-031g { 
    background:  conic-gradient(violet, indigo, blue, green, yellow, orange, red); 
    transform: translateZ(150px); }
.cube_cj031g .back--031g {    
    background: conic-gradient(red, orange, yellow, green, blue, indigo, violet); 
    transform: rotateY(180deg) translateZ(150px); }
.cube_cj031g .right-031g {   
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); 
    transform: rotateY(90deg) translateZ(150px); }
.cube_cj031g .left--031g {   
    background: linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red); 
    transform: rotateY(-90deg) translateZ(150px); }
.cube_cj031g .top---031g {    
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); 
    transform: rotateX(90deg) translateZ(150px); }
.cube_cj031g .bottom031g {      
    background: linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red); 
    transform: rotateX(-90deg) translateZ(150px); }

Cube 2

Front Back Right Left Top Bottom　背景色虹色：扇形conic-gradient

Cube 2 HTML

<div class="container0317">
<div style="color:blue;background-color:aqua;"> Front Back Right Left Top Bottom　背景色虹色：扇形conic-gradient</div> 
 <section style="background-color:blue;">
  <div class="rotate_cj031g2 cube_cj031g2">
   <div class="front-031g2">Front</div>
   <div class="back--031g2">Back</div>
   <div class="right-031g2">Right</div>
   <div class="left--031g2">Left</div>
   <div class="top---031g2">Top</div>
   <div class="bottom031g2">Bottom</div>
  </div>
 </section>
</div> 

Cube 2 css

既出のcss分は、省略しています。

.rotate_cj031g2 {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_cj031g232s 32s linear infinite alternate; }
@keyframes    rotate_cj031g232s { 
    0%  {transform:rotateX( 360deg) rotateY(-270deg) rotateZ(-180deg);} 
    100%{transform:rotateX(-180deg) rotateY( 180deg) rotateZ( 360deg);} }
    
.cube_cj031g2 {
    margin:50px; 
    width: 290px; /*width: 300px;*/
    height:290px; /*height:300px;*/ 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg); }
.cube_cj031g2 div  {
    width:  95%; /* 100%で隙間無し */
    height: 95%; /* 100%で隙間無し */ 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px; }

.cube_cj031g2 .front-031g2 {
    background:  conic-gradient(violet, indigo, blue, green, yellow, orange, red); 
    transform: translateZ(150px);
    border: 17px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 02s linear infinite; /* 虹色の境界線アニメーション */ }

   @keyframes  rainbow-border031g00s {
    0% { border-image: conic-gradient(red,orange,yellow,green,blue,indigo,violet) 1;}
    100% { border-image: conic-gradient(violet,indigo,blue,green,yellow,orange,red) 1;} }

.cube_cj031g2 .back--031g2 {
    background: conic-gradient(red,orange,yellow,green,blue,indigo,violet); 
    transform: rotateY(180deg) translateZ(150px);
    border: 17px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 01s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .right-031g2 {
    background: conic-gradient(red,orange,yellow,green,blue,indigo,violet); 
    transform: rotateY(90deg) translateZ(150px);
  border: 17px solid; /* 境界線を表示 border: 5px solid;  */
  border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 02s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .left--031g2 {
    background: conic-gradient(violet,indigo,blue,green,yellow,orange,red); 
    transform: rotateY(-90deg) translateZ(150px);
   border: 17px solid; /* 境界線を表示 border: 5px solid;  */
   border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 01s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .top---031g2 {
    border-radius:50%;
    background: conic-gradient(red,orange,yellow,green,blue,indigo,violet); 
    transform: rotateX(90deg) translateZ(150px);
  border: 17px solid; /* 境界線を表示 border: 5px solid;  */
  border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 02s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .bottom031g2 {
    background: conic-gradient(violet,indigo,blue,green,yellow,orange,red); 
    transform: rotateX(-90deg) translateZ(150px);
  border: 17px solid; /* 境界線を表示 border: 5px solid;  */
  border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 01s linear infinite; } /* 虹色の境界線アニメーション */

Cube 3

Cube面の文字数によってborderサイズ、borderのアニメーション速度を指定

Cube 3 HTML

<div class="container0317">
<div style="color:blue;background-color:aqua;">Cube面の文字数によってborderサイズ、borderのアニメーション速度を指定</div> 
 <section style="background-color:blue;">
 <div class="rotate_cj031g2 cube_cj031g3">
  <div class="front-031g2"><p class="text_rainbow">Front</p></div>
  <div class="back--031g2"><p class="text_rainbow">Back</p></div>
  <div class="right-031g2"><p class="text_rainbow">Right</p></div>
  <div class="left--031g2"><p class="text_rainbow">Left</p></div>
  <div class="top---031g2"><p class="text_rainbow">Top</p></div>
  <div class="bottom031g2"><p class="text_rainbow">Bottom</p></div>
 </div>
</section>
</div> 

Cube 3 css

既出のcss分は、省略しています。

.cube_cj031g3 {
    margin:50px; 
    width: 300px; /*width: 300px;*/
    height:300px; /*height:300px;*/ 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg); }
.cube_cj031g3 div  {
    width:  99%; 
    height: 99%; 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px; }
.cube_cj031g3 .front-031g2 {
    transform: translateZ(150px);
    border: 77px solid; /* 境界線を表示 border: 5px solid;➡17px➡➡  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 3.5s linear infinite; /* 虹色の境界線アニメーション */ 
}
   @keyframes  rainbow-border031g200s {
    0%   {border-image:conic-gradient(red,orange,yellow,green,blue,indigo,violet) 1; }
    100% {border-image:conic-gradient(violet,indigo,blue,green,yellow,orange,red) 1; } }
.cube_cj031g3 .back--031g2 {
    transform: rotateY(180deg) translateZ(150px);
    border: 77px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 3.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .right-031g2 {
    transform: rotateY(90deg) translateZ(150px);
    border: 57px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 2.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .left--031g2 {
    transform: rotateY(-90deg) translateZ(150px);
    border: 77px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 3.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .top---031g2 {
    transform: rotateX(90deg) translateZ(150px);
    border: 97px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 4.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .bottom031g2 {
    transform: rotateX(-90deg) translateZ(150px);
    border: 47px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 2.0s linear infinite; } /* 虹色の境界線アニメーション */
/* ============================================================ */
.text_rainbow {
    width:      100%;
    color: transparent; /**/
    text-align: center;
    font-weight: bolder;
    font-size: larger;
    -webkit-background-clip: text;
    background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
    animation : rainbow_10s 10s linear infinite; }
  @keyframes    rainbow_10s {
      0% { background-position: 0 0 }
    100% { background-position: 600px 0px } }
  /* -webkit-が無いと、虹色グラデーションにみになる 2022/01/10 */

Cube 4

Cube 4 HTML

<div class="container0317">
<section style="background-color: blue;">
  <div class="rotate_dj0318b cube_dj0318b">
   <div class="face0318b front-0318b">01</div>
   <div class="face0318b back--0318b">02</div>
   <div class="face0318b right-0318b">03</div>
   <div class="face0318b left--0318b">04</div>
   <div class="face0318b top---0318b">05</div>
   <div class="face0318b bottom0318b">06</div>
  </div>
 </section>
</div>

Cube 4 css

既出のcss分は、省略しています。

.rotate_dj0318b {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_dj0318b08s 08s linear infinite; }
   @keyframes rotate_dj0318b08s { 
    0%  {transform:rotateX(0) rotateY(0);} 
    100%{transform:rotateX(-360deg) rotateY(360deg);} }

.cube_dj0318b    {
    width: 280px; /* add */
    height:280px; /* add */ 
    position:relative; 
    margin:15px; 
    transform-style:preserve-3d; 
    transform:rotateX(25deg) rotateY(25deg) ; }

.face0318b   {
    width:  95%; /* chg width: 100%;*/
    height: 95%; /* chg height:100%;*/ 
    position:absolute; 
    font-size:55px; /*45px;*/
    font-weight:900; 
    color:#fff; 
    text-align:center; 
    backface-visibility:inherit; }
.front-0318b  {
    background:rgba(128,128,000,0.75); 
    color:rgba(255,127,127,1.0); 
    transform:                translateZ(140px);}
.back--0318b   {
    background:rgba(000,255,000,0.75); 
    color: rgba(255,127,255,1.0); 
    transform:rotateY(180deg) translateZ(140px);}
.right-0318b  {
    background:rgba(000,000,255,0.75); 
    color: rgba(127,127,255,1.0); 
    transform:rotateY( 90deg) translateZ(140px);}
.left--0318b   {
    background:rgba(000,255,255,0.75); 
    color: rgba(255,255,255,1.0); 
    transform:rotateY(-90deg) translateZ(140px);}
.top---0318b    {
    background:rgba(255,255,000,0.75); 
    color: rgb(255,251,003); 
    transform:rotateX( 90deg) translateZ(140px);}
.bottom0318b {
    background:rgba(128,000,128,0.75); 
    color: rgba(255,191,127,1.0); 
    transform:rotateX(-90deg) translateZ(140px);}

Cube 5

Fr Ba Ri Le To Bo 背景色半透明

Cube 5 HTML

<div class="container0317">
<div style="color:blue;background-color:aqua;"> Fr Ba Ri Le To Bo 背景色半透明</div>    
 <section style="background-color:blue;">
  <div class="rotate_dj031g cube_dj031g">
   <div>Fr</div>
   <div>Ba</div>
   <div>Ri</div>
   <div>Le</div>
   <div>To</div>
   <div>Bo</div>
  </div>
 </section>
</div> 

Cube 5 css

既出のcss分は、省略しています。

.rotate_dj031g {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_dj031g08s 08s linear infinite; 
}
@keyframes    rotate_dj031g08s {
     0%  {transform:rotateX( 180deg) rotateY(-180deg);} 
     100%{transform:rotateX(-180deg) rotateY(180deg);} 
}
.cube_dj031g     {
    width: 110px; /* 背景無し40px;chg 110px;Cube ➡ 120px;＃ */
    height:110px; /* 背景無し40px;chg 110px;Cube ➡ 120px;＃ */ 
    position:relative; 
    margin:15px; 
    transform-style:preserve-3d; 
    transform:rotateX(25deg) rotateY(25deg) ; }
    .cube_dj031g div {
    width:  100%; 
    height: 100%; 
    position:absolute; 
    display:flex; 
    justify-content:center;
    align-items:center;
    color:#FFF;
    font-size:100px;
    font-weight:900;}
.cube_dj031g div:nth-child(1){color:rgba(255,127,127,1.0);background-color:rgba(192,192,192,0.5);transform:                 translateZ(60px);}
.cube_dj031g div:nth-child(2){color:rgba(255,127,255,1.0);background-color:rgba(000,255,000,0.5);transform: rotateY(180deg) translateZ(60px);}
.cube_dj031g div:nth-child(3){color:rgba(127,127,255,1.0);background-color:rgba(255,000,000,0.5);transform: rotateY( 90deg) translateZ(60px);}
.cube_dj031g div:nth-child(4){color:rgba(127,255,255,1.0);background-color:rgba(000,255,255,0.5);transform: rotateY(-90deg) translateZ(60px);}
.cube_dj031g div:nth-child(5){color:rgba(191,255,127,1.0);background-color:rgba(255,255,000,0.5);transform: rotateX( 90deg) translateZ(60px);}
.cube_dj031g div:nth-child(6){color:rgba(255,191,127,1.0);background-color:rgba(255,000,255,0.5);transform: rotateX(-90deg) translateZ(60px);}

Cube 6

Cube in Cube

Cube 6 HTML

<div class="container0317">
 <div style="color:bleu;background-color:aqua;"><b>Cube in Cube</b></div>
 <section style="background-color:blue;">
<div class="rotate_cj cube_cj">
   <div>11</div>
   <div>12</div>
   <div>13</div>
   <div>14</div>
   <div>15</div>
   <div>16</div>
    <div class="rotate_dj cube_dj">
     <div>01</div>
     <div>02</div>
     <div>03</div>
     <div>04</div>
     <div>05</div>
     <div>06</div>
    </div>
  </div> 
 </section>
</div>

Cube 6 css

既出のcss分は、省略しています。

.rotate_cj {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_cj32s 32s linear infinite alternate; }
   @keyframes rotate_cj32s {
     0%   {transform:rotateX(0) rotateY(0);} 
     100% {transform:rotateX(-360deg) rotateY(360deg);} }
.cube_cj      {
    margin:50px; 
    width: 300px; 
    height:300px; 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg) ; }

.cube_cj div  {
    width: 70%; 
    height: 70%; 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px; }

.cube_cj div:nth-child(1) {background-color:rgba(255,127,127,0.4) ; transform:                translateZ(107px); }
.cube_cj div:nth-child(2) {background-color:rgba(255,127,255,0.4) ; transform:rotateY(180deg) translateZ(107px); }
.cube_cj div:nth-child(3) {background-color:rgba(127,127,255,0.4) ; transform:rotateY( 90deg) translateZ(107px); }
.cube_cj div:nth-child(4) {background-color:rgba(127,255,255,0.4) ; transform:rotateY(-90deg) translateZ(107px); }
.cube_cj div:nth-child(5) {background-color:rgba(191,255,127,0.4) ; transform:rotateX( 90deg) translateZ(107px); }
.cube_cj div:nth-child(6) {background-color:rgba(255,191,127,0.4) ; transform:rotateX(-90deg) translateZ(107px); } 
/* ============================================================ */
.rotate_dj {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_dj08s 08s linear infinite;
}
@keyframes    rotate_dj08s { 
    0%  {transform:rotateX(0) rotateY(0);} 
    100%{transform:rotateX(-360deg) rotateY(360deg);} 
}
.cube_dj     {
    width: 40px; /*  */
    height:40px; /*  */
    position:relative; 
    margin:15px; 
    transform-style:preserve-3d; 
    transform:rotateX(25deg) rotateY(25deg) ; }
.cube_dj div {
    width:  45%; 
    height: 45%; 
    position:absolute; 
    display:flex; 
    justify-content:center;
    align-items:center;
    color:#FFF;
    font-size:100px;
    font-weight:900;}

.cube_dj div:nth-child(1) {
    color:rgba(255,127,127,1.0); 
    background-color:rgba(192,192,192,0.5) ; 
    transform:                 translateZ(60px); }
.cube_dj div:nth-child(2) {
    color:rgba(255,127,255,1.0); 
    background-color:rgba(000,255,000,0.5) ; 
    transform: rotateY(180deg) translateZ(60px); }
.cube_dj div:nth-child(3) {
    color:rgba(127,127,255,1.0); 
    background-color:rgba(255,000,000,0.5) ; 
    transform: rotateY( 90deg) translateZ(60px); }
.cube_dj div:nth-child(4) {
    color:rgba(127,255,255,1.0); 
    background-color:rgba(000,255,255,0.5) ; 
    transform: rotateY(-90deg) translateZ(60px); }
.cube_dj div:nth-child(5) {
    color:rgba(191,255,127,1.0); 
    background-color:rgba(255,255,000,0.5) ; 
    transform: rotateX( 90deg) translateZ(60px); }
.cube_dj div:nth-child(6) {
    color:rgba(255,191,127,1.0); 
    background-color:rgba(255,000,255,0.5) ; 
    transform: rotateX(-90deg) translateZ(60px); }

Cube 7

Cube毎の、回転速度、サイズ、透明度 Cube in Cube in Cube

Cube 7 HTML

<div style="color:blue;background-color: aqua;">Cube毎の、回転速度、サイズ、透明度
<br>.L_Cube_1 {--duration:32s; --size:280; --opacity:0.25;}
<br>.M_Cube_2 {--duration:16s; --size:140; --opacity:0.50;}
<br>.S_Cube_3 {--duration: 4s; --size: 75; --opacity:1.00;}</div>
<div class="container0317">
<section style="background-color:blue;">
<div class="rotate_cube L_Cube_1">
 <div class="face0318a front-0318a">1</div>
 <div class="face0318a back--0318a">2</div>
 <div class="face0318a right-0318a">3</div>
 <div class="face0318a left--0318a">4</div>
 <div class="face0318a top---0318a">5</div>
 <div class="face0318a bottom0318a">6</div>
 <div class="rotate_cube M_Cube_2">
  <div class="face0318a front-0318a">a1</div>
  <div class="face0318a back--0318a">b2</div>
  <div class="face0318a right-0318a">c3</div>
  <div class="face0318a left--0318a">d4</div>
  <div class="face0318a top---0318a">e5</div>
  <div class="face0318a bottom0318a">f6</div>
  <div class="rotate_cube S_Cube_3">
   <div class="face0318a front-0318a">31</div>
   <div class="face0318a back--0318a">32</div>
   <div class="face0318a right-0318a">33</div>
   <div class="face0318a left--0318a">34</div>
   <div class="face0318a top---0318a">35</div>
   <div class="face0318a bottom0318a">36</div>
  </div>
 </div>
</div>
</section>
</div>

Cube 7 css

既出のcss分は、省略しています。

.rotate_cube {
    position:relative; 
    transform-style:preserve-3d;
    top:calc(var(--size) / 2 * 1px);  /*各Cubeの--sizeの半分の上部余白*/
    left:calc(var(--size) / 2 * 1px); /*各Cubeの--sizeの半分の左側余白*/
    width:calc(var(--size) * 1px);    /*各Cubeの--size*1pxの幅 */
    height:calc(var(--size) * 1px);   /*各Cubeの--size*1pxの高さ*/
    animation:rotate--duration var(--duration) linear infinite; } /*各Cubeの回転速度--durationの値 */
@keyframes    rotate--duration {
    0%  {transform:rotateX(0) rotateY(0);} 
    100%{transform:rotateX(-360deg) rotateY(360deg);} 
}
/* Cube毎の、回転速度、サイズ、透明度 */
.L_Cube_1 {--duration:32s;--size:280;--opacity:0.25; top:0;left:0;}/*L_Cubeの変数(速度,サイズ,透明度)と余白*/
.M_Cube_2 {--duration:16s;--size:140;--opacity:0.50; }             /*M_Cubeの変数(速度,サイズ,透明度)*/
.S_Cube_3 {--duration: 4s;--size: 75;--opacity:1.00; }             /*S_Cubeの変数(速度,サイズ,透明度)*/
/* Cube-face */
.face0318a   {
    width: 100%; 
    height:100%; 
    position:absolute; 
    font-size:45px; 
    font-weight:900; 
    color:#fff; 
    text-align:center; 
    backface-visibility:inherit; 
}
/* 
.L_Cube_1{--opacity:0.25;--size:280;},
.M_Cube_2{--opacity:0.40;--size:140;},
.S_Cube_3{--opacity:1.00;--size: 75;} */
.front-0318a {
    background:rgba(128,128,000,var(--opacity)); 
    color:rgba(255,127,127,1.0); 
    transform:                translateZ(calc(var(--size) / 2 * 1px)); }
.back--0318a {
    background:rgba(000,255,000,var(--opacity)); 
    color:rgba(255,127,255,1.0); 
    transform:rotateY(180deg) translateZ(calc(var(--size) / 2 * 1px)); }
.right-0318a {
    background:rgba(000,000,255,var(--opacity)); 
    color:rgba(127,127,255,1.0); 
    transform:rotateY( 90deg) translateZ(calc(var(--size) / 2 * 1px)); }
.left--0318a {
    background:rgba(000,255,255,var(--opacity)); 
    color:rgba(127,255,255,1.0); 
    transform:rotateY(-90deg) translateZ(calc(var(--size) / 2 * 1px)); }
.top---0318a {
    background:rgba(255,255,000,var(--opacity)); 
    color:rgba(191,255,127,1.0); 
    transform:rotateX( 90deg) translateZ(calc(var(--size) / 2 * 1px)); }
.bottom0318a {
    background:rgba(128,000,128,var(--opacity)); 
    color:rgba(255,191,127,1.0); 
    transform:rotateX(-90deg) translateZ(calc(var(--size) / 2 * 1px)); }

Cube 8

■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□

今回は、<div>タグに「contenteditable」を使用し、配下のコンテナ内に配置したカード内のテキストを編集できる様にしました。
カードで隠された背景画像を、表示／非表示にする為に、
カード上のテキストを「DEL」キーや「Back Space」キーで削除したり、
「F5」キーで再表示できる様にした「デザイン」の「デモ」表示です。

Code欄に👍(カーソル)を置くことで現れる、のクリックでクリップボードにCopyできます。

編集できる

Editable:1

水辺の鳥たち

背景画像付きコンテナに、半透明カード

背景画像は、
D7000 + TAMRON 大口径望遠ズームレンズ(SP 70-300mm F4-5.6 Di VC USD)で、橋の真上から撮影した翡翠です。
カードのテキストは、編集できます。

HTML 1

HTMLは、のクリックでクリップボードにCopyできます。

<div class="container-kawasemi">  
 <!--　　　                  　contenteditable グローバル属性は、ユーザーによる要素の編集が可能にする列挙型属性です。 -->
 <div class='card_transparent' contenteditable>翡翠 カワセミ<br>Kawasemi<br>Kingfisher<br>　　</div>
</div>

CSS 1

cssは、のクリックでクリップボードにCopyできます。

例示している.cssは、各プロパティ部分に/**/で、解説を入れています。

/* カワセミ・コンテナ */
.container-kawasemi {
  min-height: 100%; /*要素最小高を親要素の高さの100%に。コンテンツが少ない場合に要素が縮みすぎるのを防ぐ*/
  height: 100vh;    /*要素高をビューポート高さの100%に設定。画面全体を覆う要素を作成する際に使用*/
  box-sizing: border-box;
  display: grid;    /* グリッドレイアウトを適用 */
  place-items: center; /* グリッドアイテムを中央に配置（垂直方向と水平方向） */
  place-content: center;
  /* グリッドコンテナ内のコンテンツを中央に配置（垂直方向と水平方向）。コンテナ内に余白がある場合に有効 add */
  grid-gap: 1.75em; /* グリッドアイテム間のギャップを設定 */
/*grid-template-columns: repeat(auto-fit, Min(100%, 10em)); 下の指定に変更 */
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
/*列のテンプレートを設定（自動フィット、最小幅10em、最大幅1fr） 
  repeat(auto-fit, ...): 列の数を自動的に調整。auto-fitは、空のトラックを削除。
  minmax(10em, 1fr): 各列の最小幅を10em、最大幅を1fr（利用可能なスペースの1単位）に設定。
  これにより、レスポンシブな列配置を実現。*/

  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif;
/* フォント設定: 300: フォントの太さを300に設定。
    clamp(.875em, 5vw, 2.5em): フォントサイズを可変に。
    最小サイズを0.875em、推奨サイズを5vw（ビューポート幅の5%）、最大サイズを2.5emに設定。
    saira, sans-serif: フォントファミリーを「saira」に設定、代替フォント「sans-serif」を指定。*/  
  color: #dedede;   /* #fff;真っ白でなく */
  text-align: center; /* テキストを中央揃え */
  text-wrap: balance; /*  テキストの折り返しを調整し、よりバランスの取れた表示に */
  text-shadow: 1px 1px 2px; 
/* テキストに影を設定。影の水平方向のオフセットを1px、垂直方向のオフセットを1px、ぼかしを2pxに設定 */
/* 背景の設定 background: #1d031f;*/
  background-blend-mode: multiply;
/*background-blend-mode: multiply;: 背景画像のブレンドモードを「乗算」に設定。
  これにより、背景画像と背景色が組み合わさって表示される。*/
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/kawasemi-1450-773-432kb.jpg) 50% 50% /cover transparent;
/*url(...): 背景画像のURLを指定。
  背景画像の水平/垂直方向の位置を50%/50%に設定。
  cover: 背景画像が要素全体をカバーするように拡大縮小。
  transparent: 背景色を透明に設定。*/
  background-repeat: no-repeat; /*画像を繰り返さないように*/
}	

/* クラス.card_transparent */
.card_transparent {
  /* 疑似要素を絶対配置するために必要 */
  position: relative; /* 相対配置を基準にする */
  max-width: 15em;    /* 最大幅を15emに設定 コンテンツや親要素のレイアウトで寸法が与えられない場合にのみ寸法を設定 */
  aspect-ratio: 3/2;  /* アスペクト比を3:2に設定 */
  border: solid 16px rgba(0,0,250,0.0350); /* 境界線を設定し、透明度を与える 透明にしてスペースを確保するだけ */
  padding: 0.75em;    /* 境界線とテキストの間にスペースを設ける */
  border-radius: 1em; /* 角を丸くする */
  background: rgba(0,120,255,0.25313);
  /* 半透明の背景色を設定し、透明なストップを持つグラデーションも可能 */
  /* 疑似要素のレイヤーを光彩にする */
  z-index: 10;        /* 背景よりも大きい値を設定 */
  display: flex;      /* フレックスボックスを使用 */
  flex-direction: column; /* 垂直方向に要素を配置 */
}

.card_transparent::before, 
.card_transparent::after {
  /* ボックス全体を完全に覆う */
 --full: conic-gradient(red 0 0); /* 完全な円錐グラデーションを定義 */
 /* グリッドは、積み重ねられたアイテムがテキストノードの場合、積み重ねには機能しない */
 position: absolute;      /* 絶対配置にする */
 /* 境界線の幅と同じ値でマイナスにする */
 inset: -6px;             /* 親要素の境界線から内側に配置 */
 /* 親要素のボックスモデルと角の丸みを継承 */
 border: inherit;         /* 親要素の境界線を継承 */
 border-radius: inherit;  /* 親要素の角の丸みを継承 */
 /* 光彩のためにクリップされないスペースを確保 */
 box-shadow: 0 0 6em rgba(0, 0, 0, 0.001); /* 影を設定し、光彩効果を出す */
 background: conic-gradient(from var(--alpha), #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #277da1, #577590, #f94144) border-box;
 /* 円錐グラデーションの背景を設定し、アニメーションの開始角度をカスタムプロパティ--alphaから取得 */
 /* パディングボックスをノークリップボックスから減算して、パディングボックス内のすべてを透明にする */
 mask: var(--full) no-clip subtract, var(--full) padding-box; /* マスクを設定し、内側を透明にする */
 /* テキストの選択を妨げないようにする */
 pointer-events: none;  /* ポインターイベントを無効にする */
                        /* グラデーションの開始角度をアニメーション化 */
 content: "";           /* 疑似要素に内容を設定しない */
 animation: alpha4s 4s linear infinite;/* アニメーションを適用し、4秒ごとに線形で無限に繰り返す */
}

@keyframes   alpha4s {
 to {--alpha: 1turn ; } /* アニメーションの終了時に--alphaを1回転させる */
}

/* カスタムプロパティ--alphaを登録し、アニメーション可能にする */
@property --alpha {
  syntax: "<angle>";    /* 値の型を角度に指定 */
  initial-value: 0deg;  /* 初期値を0度にする */
                        /* 疑似要素でのみ使用され、継承されないようにする */
  inherits: false;      /* 継承を無効化し、パフォーマンスを向上させる */
}

.card_transparent::after {
  filter: blur(2em); /* ぼかしフィルターを適用し、光彩効果を強調 */
}

Editable:2

水辺の鳥たち2

絶妙のシャッターチャンスでした。

何が隠れている？➡テキストは編集できます。➡テキストを編集して隠れているものを確認できます。
テキストを「DEL」キーで削除するか、←「Back Space」キーを押すことで、背景が現れます。
「F5」キーで元の表示に戻ります。

HTML 2

<div class="container-jyoubitaki">
 <div class="rounded_corners3" contenteditable>ジョウビタキ
  <div class="rounded_corners2" contenteditable>jyoubitaki............................./
   <div class="rounded_corners1" contenteditable>Daurian<br>redstart</div>
  </div>
 </div>
</div>

CSS 2

cssは、のクリックでクリップボードにCopyできます。

/* ジョウビタキ・コンテナ */
.container-jyoubitaki {
  min-height: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  place-content: center;
  grid-gap: 1.75em;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif; 
  color: #dedede;
  text-align: center;
  text-wrap: balance;
  text-shadow: 1px 1px 2px;
  background-blend-mode: multiply;
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/jyoubitaki-1450-976-328KB.jpg) 55%/cover transparent;
}	

/* クラス.rounded_corners1 */
.rounded_corners1 {
	--list1: rgba(255,188,0,0.55), rgba(255,0,88,0.05);
  /* カスタムプロパティ--list1(orange&red)を定義し、グラデーションの色リストを設定 */
	--grad1: linear-gradient(45deg, var(--list1)); 
  /* カスタムプロパティ--gradを定義し、45度の線形グラデーションを設定。--list1の値を参照 */
	position: relative; /* 相対配置を設定し、疑似要素の絶対配置の基準にする */
	border: solid 4px #0000;/* 透明な4pxの境界線を設定。スペース確保用 */
	aspect-ratio: 7/ 10; /* アスペクト比を7:10に設定 */
	border-radius: 1em; /* 角を1emで丸くする */

/* conic-gradient円錐グラデーションをpadding-boxに設定し、背景のベースにする */
/* カスタムプロパティ--gradの線形グラデーションをborder-boxに設定し、境界線部分の背景にする */
	background: conic-gradient(rgba(2, 74, 243, 0.29) 0 0) padding-box,var(--grad1) border-box; 
	&:nth-child(2) { --list1: #03a9f4, #ff0058 } 
           /* 2番目の.box要素にのみ適用  --listの値を上書きし、別のグラデーション色を設定 */
	&:nth-child(3) { --list1: #4dff03, #00d0ff } 
           /* 3番目の.box要素にのみ適用 --listの値を上書きし、別のグラデーション色を設定 */
	/* 疑似要素::beforeにスタイルを適用 */
	&::before {
		position: absolute;       /* 絶対配置を設定 */
		inset: 0;                 /* 親要素のpadding-box全体を覆うように配置 */
		z-index: -1;              /* 親要素よりも背面に配置 */
		background: var(--grad1);  /* 背景にカスタムプロパティ--grad1のグラデーションを設定 */
		filter: blur(.75em);      /* 0.75emのぼかしフィルターを適用し、光彩効果を出す */
		content: "";              /* 疑似要素の内容を空にする */
	}
}

/* クラス.rounded_corners2 */
.rounded_corners2 {
	--list2: rgba(0,255,255,0.55), rgba(0,0,255,0.05);
	--grad2: linear-gradient(45deg, var(--list2)); 
	position: relative; 
	border: solid 4px #0000;
	aspect-ratio: 7/ 10;
	border-radius: 1em;
	background: conic-gradient(rgba(2,74,243,0.29) 0 0) padding-box,
		var(--grad2) border-box;
	&:nth-child(2) { --list2: #03a9f4, #ff0058 }
	&:nth-child(3) { --list2: #4dff03, #00d0ff } 
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--grad2);
		filter: blur(.75em);
		content: ""; 
	}
}

/* クラス.rounded_corners3 */
.rounded_corners3 {
	--list3: rgba(0,255,0,0.55), rgba(0,128,0,0.05);
	--grad3: linear-gradient(45deg, var(--list3));
	position: relative;
	border: solid 4px #0000;
	aspect-ratio: 7/ 10;
	border-radius: 1em;
	background: conic-gradient(rgba(2, 74, 243, 0.29) 0 0) padding-box,var(--grad3) border-box;
	&:nth-child(2) { --list3: #03a9f4, #ff0058 }
	&:nth-child(3) { --list3: #4dff03, #00d0ff }
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--grad3);
		filter: blur(.75em);
		content: "";
	}
}

Editable:3

ズームレンズで撮影したシオカラトンボ

編集できます。➡テキストを削除して透き通ったトンボの羽根を見てみませんか？

dragonfly

HTML 3

HTMLは、のクリックでクリップボードにCopyできます。

<div class="container-ShiokaraTonbo">
 <div class="rounded_corners2" contenteditable>シオカラトンボ ･･････････････････････････････</div>
</div>

CSS 3

cssは、のクリックでクリップボードにCopyできます。

(CSS 2)で既に定義済のものは省略しています。

/* シオカラトンボ・コンテナ */
.container-ShiokaraTonbo {
  min-height: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif; 
  color: #dedede;
  text-align: center;
  text-wrap: balance;
  text-shadow: 1px 1px 2px;
  background-blend-mode: multiply;
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/Dragonfly-1450-960-664kb.jpg) 55%/cover transparent;
}

Codeは、のクリックでクリップボードにCopyできます。

各CubeのHTMLとCSSは、ソースコードを公開しています。

前回の異なる動きのCubeは、以下のブログカードのクリックからどうぞ

Cube Design 1、8、27のアニメーションとcode解説・Copy も!!!

８Cubeと、27Cubeでは、アニメーションの違い(遅延など)が分かる様に、各Cubeに番号を付けています。Codeは、のクリックでクリップボードにCopyできます。各Cubeの定義には、静止とアニメーション・関連のプロパティ（継続時間、...

イイネ.biz

2025.08.11

Cube’s

8 Cube’s

実は、上記Cubeと以下のHTMLとcssは少し変更しています。何かというと各Cubeの色の透明度が異なることでお分かり戴けると思いますが、ソースコードのこの記事での表示上の都合で省略していますが、基本は変わりませんので、あとは応用でということで、そこはご了承願います。（透明度は、0.1545から0,8545までの8段階で各Cubeの色を調整しています。）

8Cube’s .HTML

HTML欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

<div class="container08">
    <div class="origin08">
        <div class="cube08 layer1 r1 c1">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
        <div class="cube08 layer1 r1 c2">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
        <div class="cube08 layer1 r2 c1">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
        <div class="cube08 layer1 r2 c2">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
        <div class="cube08 layer2 r1 c1">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
        <div class="cube08 layer2 r1 c2">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
        <div class="cube08 layer2 r2 c1">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
        <div class="cube08 layer2 r2 c2">
            <div class="surface08 front08"></div>
            <div class="surface08 back08"></div>
            <div class="surface08 left08"></div>
            <div class="surface08 right08"></div>
            <div class="surface08 top08"></div>
            <div class="surface08 bottom08"></div>
        </div>
    </div>
</div>

8Cube’s .css

css欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

.container08 {
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(#99d0fb, #0415f6);
  position: relative;   
  width:  100%;       
  height: 30vh;       
  perspective: 800px; 
}
/*perspective: z=0の平面とユーザーとの間の距離を定めて3Dに配置された要素に遠近感を与えます。*/

.cube08 .surface08, 
.container08 .origin08 .cube08, 
.container08 .origin08 {
  position: absolute;
  top:  0;
  left: 0;
  right:  0;
  bottom: 0;
  margin: auto;
}

.container08 .origin08 {
  transform-style: preserve-3d;
  animation: rotate-16s 16s linear infinite forwards;}
@keyframes   rotate-16s {
  from {transform: rotateX(0) rotateY(0); }
  to   {transform: rotateX(360deg) rotateY(360deg);  }
}

.container08 .origin08 .cube08 {
  width:  050px; /* 100px;*半分*/
  height: 050px; /* 100px;*半分*/
}

.cube08 {transform-style: preserve-3d;}

.cube08 .surface08 {
  width:  050px; /* 100px;*半分*/
  height: 050px; /* 100px;*半分*/
  outline: solid 1px transparent;
  transform-style: preserve-3d;
}
.cube08 .surface08.front08 {
  background: rgba(255,000,000,0.545);
  transform: rotateY(0deg) translateZ(25px); /* translateZ(50px);半分*/
}
.cube08 .surface08.left08 {
  background: rgba(000,255,000,0.545);
  transform: rotateY(-90deg) translateZ(25px); /* translateZ(50px);半分*/
}
.cube08 .surface08.back08 {
  background: rgba(000,000,255,0.545); /*rgba(0,0,255,0.3);*/
  transform: rotateY(180deg) translateZ(25px); /* translateZ(50px);半分*/
}
.cube08 .surface08.right08 {
  background: rgba(255,000,255,0.545);
  transform: rotateY(90deg) translateZ(25px); /* translateZ(50px);半分*/
}
.cube08 .surface08.top08 {
  background: rgba(255,255,000,0.545);
  transform: rotateX(90deg) translateZ(25px); /* translateZ(50px);半分*/
}
.cube08 .surface08.botom22 {
  background: rgba(000,255,255,0.545);
  transform: rotateX(-90deg) translateZ(25px); /* translateZ(50px);半分*/
}
.cube08.layer1.r1.c1 {transform: translateX(-125px) translateY(-125px) translateZ(-125px);}
.cube08.layer1.r1.c2 {transform: translateX(0)      translateY(-125px) translateZ(-125px);}
.cube08.layer1.r1.c3 {transform: translateX( 125px) translateY(-125px) translateZ(-125px);}
.cube08.layer1.r2.c1 {transform: translateX(-125px) translateY(0) translateZ(-125px);}
.cube08.layer1.r2.c2 {transform: translateX(0)      translateY(0) translateZ(-125px);}
.cube08.layer1.r2.c3 {transform: translateX( 125px) translateY(0) translateZ(-125px);}
.cube08.layer1.r3.c1 {transform: translateX(-125px) translateY( 125px) translateZ(-125px);}
.cube08.layer1.r3.c2 {transform: translateX(0)      translateY( 125px) translateZ(-125px);}
.cube08.layer1.r3.c3 {transform: translateX( 125px) translateY( 125px) translateZ(-125px);}
.cube08.layer2.r1.c1 {transform: translateX(-125px) translateY(-125px) translateZ(0);}
.cube08.layer2.r1.c2 {transform: translateX(0)      translateY(-125px) translateZ(0);}
.cube08.layer2.r1.c3 {transform: translateX( 125px) translateY(-125px) translateZ(0);}
.cube08.layer2.r2.c1 {transform: translateX(-125px) translateY(0) translateZ(0);}
.cube08.layer2.r2.c2 {transform: translateX(0)      translateY(0) translateZ(0);}
.cube08.layer2.r2.c3 {transform: translateX( 125px) translateY(0) translateZ(0);}
.cube08.layer2.r3.c1 {transform: translateX(-125px) translateY( 125px) translateZ(0);}
.cube08.layer2.r3.c2 {transform: translateX(0)      translateY( 125px) translateZ(0);}
.cube08.layer2.r3.c3 {transform: translateX( 125px) translateY( 125px) translateZ(0);}
.cube08.layer3.r1.c1 {transform: translateX(-125px) translateY(-125px) translateZ( 125px);}
.cube08.layer3.r1.c2 {transform: translateX(0)      translateY(-125px) translateZ( 125px);}
.cube08.layer3.r1.c3 {transform: translateX( 125px) translateY(-125px) translateZ( 125px);}
.cube08.layer3.r2.c1 {transform: translateX(-125px) translateY(0) translateZ( 125px);}
.cube08.layer3.r2.c2 {transform: translateX(0)      translateY(0) translateZ( 125px);}
.cube08.layer3.r2.c3 {transform: translateX( 125px) translateY(0) translateZ( 125px);}
.cube08.layer3.r3.c1 {transform: translateX(-125px) translateY( 125px) translateZ( 125px);}
.cube08.layer3.r3.c2 {transform: translateX(0)      translateY( 125px) translateZ( 125px);}
.cube08.layer3.r3.c3 {transform: translateX( 125px) translateY( 125px) translateZ( 125px);}
/*半分*/
.cube08.layer1.r1.c1 {transform: translateX(-62.5px)  translateY(-62.5px) translateZ(-62.5px);} /*半分*/
.cube08.layer1.r1.c2 {transform: translateX(0)        translateY(-62.5px) translateZ(-62.5px);}
.cube08.layer1.r1.c3 {transform: translateX( 62.5px)  translateY(-62.5px) translateZ(-62.5px);}
.cube08.layer1.r2.c1 {transform: translateX(-62.5px)  translateY(0)       translateZ(-62.5px);}
.cube08.layer1.r2.c2 {transform: translateX(0)        translateY(0)       translateZ(-62.5px);}
.cube08.layer1.r2.c3 {transform: translateX( 62.5px)  translateY(0)       translateZ(-62.5px);}
.cube08.layer1.r3.c1 {transform: translateX(-62.5px)  translateY( 62.5px) translateZ(-62.5px);}
.cube08.layer1.r3.c2 {transform: translateX(0)        translateY( 62.5px) translateZ(-62.5px);}
.cube08.layer1.r3.c3 {transform: translateX( 62.5px)  translateY( 62.5px) translateZ(-62.5px);}
.cube08.layer2.r1.c1 {transform: translateX(-62.5px)  translateY(-62.5px) translateZ(0);}
.cube08.layer2.r1.c2 {transform: translateX(0)        translateY(-62.5px) translateZ(0);}
.cube08.layer2.r1.c3 {transform: translateX( 62.5px)  translateY(-62.5px) translateZ(0);}
.cube08.layer2.r2.c1 {transform: translateX(-62.5px)  translateY(0)       translateZ(0);}
.cube08.layer2.r2.c2 {transform: translateX(0)        translateY(0)       translateZ(0);}
.cube08.layer2.r2.c3 {transform: translateX( 62.5px)  translateY(0)       translateZ(0);}
.cube08.layer2.r3.c1 {transform: translateX(-62.5px)  translateY( 62.5px) translateZ(0);}
.cube08.layer2.r3.c2 {transform: translateX(0)        translateY( 62.5px) translateZ(0);}
.cube08.layer2.r3.c3 {transform: translateX( 62.5px)  translateY( 62.5px) translateZ(0);}
.cube08.layer3.r1.c1 {transform: translateX(-62.5px)  translateY(-62.5px) translateZ( 62.5px);}
.cube08.layer3.r1.c2 {transform: translateX(0)        translateY(-62.5px) translateZ( 62.5px);}
.cube08.layer3.r1.c3 {transform: translateX( 62.5px)  translateY(-62.5px) translateZ( 62.5px);}
.cube08.layer3.r2.c1 {transform: translateX(-62.5px)  translateY(0)       translateZ( 62.5px);}
.cube08.layer3.r2.c2 {transform: translateX(0)        translateY(0)       translateZ( 62.5px);}
.cube08.layer3.r2.c3 {transform: translateX( 62.5px)  translateY(0)       translateZ( 62.5px);}
.cube08.layer3.r3.c1 {transform: translateX(-62.5px)  translateY( 62.5px) translateZ( 62.5px);}
.cube08.layer3.r3.c2 {transform: translateX(0)        translateY( 62.5px) translateZ( 62.5px);}
.cube08.layer3.r3.c3 {transform: translateX( 62.5px)  translateY( 62.5px) translateZ( 62.5px);}

9Cube’s x 6Face

各Cubeの軽妙な透明度の違いによるかすかな色の違いを楽しんで!!!

9Cube’s x 6Face .HTML

<div class="container96">
    <div class="origin96">
        <div class="cube96 layer1 r1 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r1 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r1 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r2 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r2 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r2 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r3 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r3 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer1 r3 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r1 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r1 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r1 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r2 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r2 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r2 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r3 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r3 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer2 r3 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r1 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r1 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 R96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r1 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r2 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r2 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r2 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r3 c1">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r3 c2">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
        <div class="cube96 layer3 r3 c3">
            <div class="surface96 Fr96"></div>
            <div class="surface96 Ba96"></div>
            <div class="surface96 Le96"></div>
            <div class="surface96 Ri96"></div>
            <div class="surface96 To96"></div>
            <div class="surface96 Bo96"></div>
        </div>
    </div>
</div>

9Cube’s x 6Face .css

.container96 {
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(#99d0fb, #0415f6);
  position: relative; 
  width:  100%;       
  height: 45vh;      
  perspective: 800px; 
}

.cube96 .surface96, 
.container96 .origin96 .cube96, 
.container96 .origin96 {
  position: absolute;  /* position: relative;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.container96 .origin96 {
  transform-style: preserve-3d;
  animation: rotate-16s 16s linear infinite forwards;}
@keyframes   rotate-16s {
  from {transform: rotateX(0) rotateY(0); }
  to   {transform: rotateX(360deg) rotateY(360deg);  }
}
.container96 .origin96 .cube96 {
  width:  50px; /* 100px;*半分*/
  height: 50px; /* 100px;*半分*/
}
.cube96 {
  transform-style: preserve-3d;
}
.cube96 .surface96 {
  width:  50px; /* 100px;*半分*/
  height: 50px; /* 100px;*半分*/
  outline: solid 1px transparent;
  transform-style: preserve-3d;
}
.cube96 .surface96.Fr96 {
  background: rgba(255,000,000,0.545);
  transform: rotateY(0deg) translateZ(25px); /* translateZ(50px);*半分*/
}
.cube96 .surface96.Le96 {
  background: rgba(000,255,000,0.545);
  transform: rotateY(-90deg) translateZ(25px); /* translateZ(50px);*半分*/
}
.cube96 .surface96.Ba96 {
  background: rgba(000,000,255,0.545); /*rgba(0,0,255,0.3);*/
  transform: rotateY(180deg) translateZ(25px); /* translateZ(50px);*半分*/
}
.cube96 .surface96.Ri96 {
  background: rgba(255,000,255,0.545);
  transform: rotateY(90deg) translateZ(25px); /* translateZ(50px);*半分*/
}
.cube96 .surface96.To96 {
  background: rgba(255,255,000,0.545);
  transform: rotateX(90deg) translateZ(25px); /* translateZ(50px);*半分*/
}
.cube96 .surface96.Bo96 {
  background: rgba(000,255,255,0.545);
  transform: rotateX(-90deg) translateZ(25px); /* translateZ(50px);*半分*/
}
.cube96.layer1.r1.c1 {transform: translateX(-125px) translateY(-125px)  translateZ(-125px);}
.cube96.layer1.r1.c2 {transform: translateX(0)      translateY(-125px)  translateZ(-125px);}
.cube96.layer1.r1.c3 {transform: translateX( 125px) translateY(-125px)  translateZ(-125px);}
.cube96.layer1.r2.c1 {transform: translateX(-125px) translateY(0)       translateZ(-125px);}
.cube96.layer1.r2.c2 {transform: translateX(0)      translateY(0)       translateZ(-125px);}
.cube96.layer1.r2.c3 {transform: translateX( 125px) translateY(0)       translateZ(-125px);}
.cube96.layer1.r3.c1 {transform: translateX(-125px) translateY( 125px)  translateZ(-125px);}
.cube96.layer1.r3.c2 {transform: translateX(0)      translateY( 125px)  translateZ(-125px);}
.cube96.layer1.r3.c3 {transform: translateX( 125px) translateY( 125px)  translateZ(-125px);}
.cube96.layer2.r1.c1 {transform: translateX(-125px) translateY(-125px)  translateZ(0);}
.cube96.layer2.r1.c2 {transform: translateX(0)      translateY(-125px)  translateZ(0);}
.cube96.layer2.r1.c3 {transform: translateX( 125px) translateY(-125px)  translateZ(0);}
.cube96.layer2.r2.c1 {transform: translateX(-125px) translateY(0)       translateZ(0);}
.cube96.layer2.r2.c2 {transform: translateX(0)      translateY(0)       translateZ(0);}
.cube96.layer2.r2.c3 {transform: translateX( 125px) translateY(0)       translateZ(0);}
.cube96.layer2.r3.c1 {transform: translateX(-125px) translateY( 125px)  translateZ(0);}
.cube96.layer2.r3.c2 {transform: translateX(0)      translateY( 125px)  translateZ(0);}
.cube96.layer2.r3.c3 {transform: translateX( 125px) translateY( 125px)  translateZ(0);}
.cube96.layer3.r1.c1 {transform: translateX(-125px) translateY(-125px)  translateZ( 125px);}
.cube96.layer3.r1.c2 {transform: translateX(0)      translateY(-125px)  translateZ( 125px);}
.cube96.layer3.r1.c3 {transform: translateX( 125px) translateY(-125px)  translateZ( 125px);}
.cube96.layer3.r2.c1 {transform: translateX(-125px) translateY(0)       translateZ( 125px);}
.cube96.layer3.r2.c2 {transform: translateX(0)      translateY(0)       translateZ( 125px);}
.cube96.layer3.r2.c3 {transform: translateX( 125px) translateY(0)       translateZ( 125px);}
.cube96.layer3.r3.c1 {transform: translateX(-125px) translateY( 125px)  translateZ( 125px);}
.cube96.layer3.r3.c2 {transform: translateX(0)      translateY( 125px)  translateZ( 125px);}
.cube96.layer3.r3.c3 {transform: translateX( 125px) translateY( 125px)  translateZ( 125px);}
/*半分*/
.cube96.layer1.r1.c1 {transform: translateX(-62.5px)  translateY(-62.5px) translateZ(-62.5px);} /*半分*/
.cube96.layer1.r1.c2 {transform: translateX(0)        translateY(-62.5px) translateZ(-62.5px);}
.cube96.layer1.r1.c3 {transform: translateX( 62.5px)  translateY(-62.5px) translateZ(-62.5px);}
.cube96.layer1.r2.c1 {transform: translateX(-62.5px)  translateY(0)       translateZ(-62.5px);}
.cube96.layer1.r2.c2 {transform: translateX(0)        translateY(0)       translateZ(-62.5px);}
.cube96.layer1.r2.c3 {transform: translateX( 62.5px)  translateY(0)       translateZ(-62.5px);}
.cube96.layer1.r3.c1 {transform: translateX(-62.5px)  translateY( 62.5px) translateZ(-62.5px);}
.cube96.layer1.r3.c2 {transform: translateX(0)        translateY( 62.5px) translateZ(-62.5px);}
.cube96.layer1.r3.c3 {transform: translateX( 62.5px)  translateY( 62.5px) translateZ(-62.5px);}
.cube96.layer2.r1.c1 {transform: translateX(-62.5px)  translateY(-62.5px) translateZ(0);}
.cube96.layer2.r1.c2 {transform: translateX(0)        translateY(-62.5px) translateZ(0);}
.cube96.layer2.r1.c3 {transform: translateX( 62.5px)  translateY(-62.5px) translateZ(0);}
.cube96.layer2.r2.c1 {transform: translateX(-62.5px)  translateY(0)       translateZ(0);}
.cube96.layer2.r2.c2 {transform: translateX(0)        translateY(0)       translateZ(0);}
.cube96.layer2.r2.c3 {transform: translateX( 62.5px)  translateY(0)       translateZ(0);}
.cube96.layer2.r3.c1 {transform: translateX(-62.5px)  translateY( 62.5px) translateZ(0);}
.cube96.layer2.r3.c2 {transform: translateX(0)        translateY( 62.5px) translateZ(0);}
.cube96.layer2.r3.c3 {transform: translateX( 62.5px)  translateY( 62.5px) translateZ(0);}
.cube96.layer3.r1.c1 {transform: translateX(-62.5px)  translateY(-62.5px) translateZ( 62.5px);}
.cube96.layer3.r1.c2 {transform: translateX(0)        translateY(-62.5px) translateZ( 62.5px);}
.cube96.layer3.r1.c3 {transform: translateX( 62.5px)  translateY(-62.5px) translateZ( 62.5px);}
.cube96.layer3.r2.c1 {transform: translateX(-62.5px)  translateY(0)       translateZ( 62.5px);}
.cube96.layer3.r2.c2 {transform: translateX(0)        translateY(0)       translateZ( 62.5px);}
.cube96.layer3.r2.c3 {transform: translateX( 62.5px)  translateY(0)       translateZ( 62.5px);}
.cube96.layer3.r3.c1 {transform: translateX(-62.5px)  translateY( 62.5px) translateZ( 62.5px);}
.cube96.layer3.r3.c2 {transform: translateX(0)        translateY( 62.5px) translateZ( 62.5px);}
.cube96.layer3.r3.c3 {transform: translateX( 62.5px)  translateY( 62.5px) translateZ( 62.5px);}  

27Cube’s

27Cube’s .HTML

<div class="container27">

<section class="container_27">

    <div class="B_cube cubeN01">
        <div class="R01" style="color:black;">01</div>
        <div class="L01" style="color:white;">01</div>
        <div class="T01" style="color:white;">01</div>
    </div>
    <div class="B_cube cubeN02">
        <div class="B_R" style="color:black;">02</div>
        <div class="B_L" style="color:white;">02</div>
        <div class="B_T" style="color:white;">02</div>
    </div>
    <div class="B_cube cubeN03">
        <div class="B_R" style="color:black;">03</div>
        <div class="B_L" style="color:white;">03</div>
        <div class="B_T" style="color:white;">03</div>
    </div>
    <div class="B_cube cubeN04">
        <div class="R04" style="color:black;">04</div>
        <div class="L04" style="color:white;">04</div>
        <div class="T04" style="color:white;">04</div>
    </div>
    <div class="B_cube cubeN05">
        <div class="B_R" style="color:black;">05</div>
        <div class="B_L" style="color:white;">05</div>
        <div class="B_T" style="color:white;">05</div>
    </div>
    <div class="B_cube cubeN06">
        <div class="R06" style="color:black;">06</div>
        <div class="L06" style="color:white;">06</div>
        <div class="T06" style="color:white;">06</div>
    </div>
    <div class="B_cube cubeN07">
        <div class="B_R" style="color:black;">07</div>
        <div class="B_L" style="color:white;">07</div>
        <div class="B_T" style="color:white;">07</div>
    </div>
    <div class="B_cube cubeN08">
        <div class="B_R" style="color:black;">08</div>
        <div class="B_L" style="color:white;">08</div>
        <div class="B_T" style="color:white;">08</div>
    </div>
    <div class="B_cube cubeN09">
        <div class="R19" style="color:black;">09</div>
        <div class="L19" style="color:white;">09</div>
        <div class="T19" style="color:white;">09</div>
    </div>
    <div class="B_cube cubeN10">
        <div class="B_R" style="color:black;">10</div>
        <div class="B_L" style="color:white;">10</div>
        <div class="B_T" style="color:white;">10</div>
    </div>
    <div class="B_cube cubeN11">
        <div class="R11" style="color:black;">11</div>
        <div class="L11" style="color:white;">11</div>
        <div class="T11" style="color:white;">11</div>
    </div>
    <div class="B_cube cubeN12">
        <div class="R12" style="color:black;">12</div>
        <div class="L12" style="color:white;">12</div>
        <div class="T12" style="color:white;">12</div>
    </div>
    <div class="B_cube cubeN13">
        <div class="B_R" style="color:black;">13</div>
        <div class="B_L" style="color:white;">13</div>
        <div class="B_T" style="color:white;">13</div>
    </div>
    <div class="B_cube cubeN14">
        <div class="R14" style="color:black;">14</div>
        <div class="L14" style="color:white;">14</div>
        <div class="T14" style="color:white;">14</div>
    </div>
    <div class="B_cube cubeN15">
        <div class="B_R" style="color:black;">15</div>
        <div class="B_L" style="color:white;">15</div>
        <div class="B_T" style="color:white;">15</div>
    </div>
    <div class="B_cube cubeN16">
        <div class="R16" style="color:black;">16</div>
        <div class="L16" style="color:white;">16</div>
        <div class="T16" style="color:white;">16</div>
    </div>
    <div class="B_cube cubeN17">
        <div class="R17" style="color:black;">17</div>
        <div class="L17" style="color:white;">17</div>
        <div class="T17" style="color:white;">17</div>
    </div>
    <div class="B_cube cubeN18">
        <div class="B_R" style="color:black;">18</div>
        <div class="B_L" style="color:white;">18</div>
        <div class="B_T" style="color:white;">18</div>
    </div>
    <div class="B_cube cubeN19">
        <div class="R19" style="color:black;">19</div>
        <div class="L19" style="color:white;">19</div>
        <div class="T19" style="color:white;">19</div>
    </div>
    <div class="B_cube cubeN20">
        <div class="B_R" style="color:black;">20</div>
        <div class="B_L" style="color:white;">20</div>
        <div class="B_T" style="color:white;">20</div>
    </div>
    <div class="B_cube cubeN21">
        <div class="B_R" style="color:black;">21</div>
        <div class="B_L" style="color:white;">21</div>
        <div class="B_T" style="color:white;">21</div>
    </div>
    <div class="B_cube cubeN22">
        <div class="R22" style="color:black;">22</div>
        <div class="L22" style="color:white;">22</div>
        <div class="T22" style="color:white;">22</div>
    </div>
    <div class="B_cube cubeN23">
        <div class="B_R" style="color:black;">23</div>
        <div class="B_L" style="color:white;">23</div>
        <div class="B_T" style="color:white;">23</div>
    </div>
    <div class="B_cube cubeN24">
        <div class="R24" style="color:black;">24</div>
        <div class="L24" style="color:white;">24</div>
        <div class="T24" style="color:white;">24</div>
    </div>
    <div class="B_cube cubeN25">
        <div class="B_R" style="color:black;">25</div>
        <div class="B_L" style="color:white;">26</div>
        <div class="B_T" style="color:white;">25</div>
    </div>
    <div class="B_cube cubeN26">
        <div class="B_R" style="color:black;">26</div>
        <div class="B_L" style="color:white;">26</div>
        <div class="B_T" style="color:white;">26</div>
    </div>
    <div class="B_cube cubeN27">
        <div class="R27" style="color:black;">27</div>
        <div class="L27" style="color:white;">27</div>
        <div class="T27" style="color:white;">27</div>
    </div>
</section>
</div>

27Cube’s .css

.container27 {
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(#99d0fb, #0415f6);
  position: relative;   
  width:  100%;       
  height: 55vh;       
  perspective: 800px; 
}
.container_27 {
  width: 60px;
  height: 60px;
  perspective: 6000px; 
}
.abs-center {
  display: false;
  position: relative; /*position: absolute;  */
  margin: false;
  top: 50%;
  left: 50%;
  right: false;
  bottom: false;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 88%;
}
@media screen and (max-width: 600px) {
  .container_27 {
    transform: translate(-50%, -50%) scale(0.55);
  }
}
.B_cube {
  position: absolute;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
}
.B_cube.cubeN01 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(-59px);}
.B_cube.cubeN02 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(-59px);}
.B_cube.cubeN03 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(0px);}
.B_cube.cubeN04 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(-59px);}
.B_cube.cubeN05 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(0px);}
.B_cube.cubeN06 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(59px);}
.B_cube.cubeN07 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(0px);}
.B_cube.cubeN08 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(59px);}
.B_cube.cubeN09 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(59px);}
.B_cube.cubeN10 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(-59px);}
.B_cube.cubeN11 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-59px);}
.B_cube.cubeN12 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(0px);}
.B_cube.cubeN13 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(-59px);}
.B_cube.cubeN14 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(0px);}
.B_cube.cubeN15 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(59px);}
.B_cube.cubeN16 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(0px);}
.B_cube.cubeN17 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(59px);}
.B_cube.cubeN18 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(59px);}
.B_cube.cubeN19 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(-59px);}
.B_cube.cubeN20 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(-59px);}
.B_cube.cubeN21 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(0px);}
.B_cube.cubeN22 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(-59px);}
.B_cube.cubeN23 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(0px);}
.B_cube.cubeN24 {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(59px);}
.B_cube.cubeN25 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(0px);}
.B_cube.cubeN26 {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(59px);}
.B_cube.cubeN27 {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(59px);}

.B_cube:nth-child(01) {animation: C_Anim_01 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(02) {animation: C_Anim_02 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(03) {animation: C_Anim_03 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(04) {animation: C_Anim_04 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(05) {animation: C_Anim_05 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(06) {animation: C_Anim_06 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(07) {animation: C_Anim_07 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(08) {animation: C_Anim_08 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(09) {animation: C_Anim_09 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(10) {animation: C_Anim_10 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(11) {animation: C_Anim_11 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(12) {animation: C_Anim_12 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(13) {animation: C_Anim_13 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(14) {animation: C_Anim_14 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(15) {animation: C_Anim_15 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(16) {animation: C_Anim_16 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(17) {animation: C_Anim_17 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(18) {animation: C_Anim_18 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(19) {animation: C_Anim_19 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(20) {animation: C_Anim_20 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(21) {animation: C_Anim_21 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(22) {animation: C_Anim_22 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(23) {animation: C_Anim_23 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(24) {animation: C_Anim_24 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(25) {animation: C_Anim_25 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(26) {animation: C_Anim_26 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}
.B_cube:nth-child(27) {animation: C_Anim_27 3.5s cubic-bezier(0.75, 0, 0.2, 1) infinite;}

.B_cube div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.B_cube .B_R {
  transform: rotateY(0deg) translateZ(30px);
  background-color: #e7ac20;
}
.B_cube .B_L {
  transform: rotateY(-90deg) translateZ(30px);
  background-color: #d53a33;
}
.B_cube .B_T {
  transform: rotateX(90deg) translateZ(30px);
  background-color: #1d9099;
}
/* background-color:yellow; R 01,04,06,09,11,12,14,16,17,19,22,24,27 */
.B_cube .R01 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R04 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R06 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R09 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R11 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R12 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R14 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R16 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R17 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R19 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R22 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R24 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
.B_cube .R27 {
  transform: rotateY(0deg) translateZ(30px);
  background-color:yellow;
}
/* background-color:red; L 01,04,06,09,11,12,14,16,17,19,22,24, & 27 */
.B_cube .L01 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L04 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L06 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L09 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L11 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L12 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L14 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L16 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L17 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L19 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L22 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L24 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
.B_cube .L27 {
  transform: rotateY(-90deg) translateZ(30px);
  background-color:red;
}
/* background-color:blue; T01,04,06,09,11,12,14,16,17,19,22,24, & 27  */
.B_cube .T01 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T04 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T06 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T09 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T11 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T12 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T14 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T16 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T17 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T19 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T22 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T24 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}
.B_cube .T27 {
  transform: rotateX(90deg) translateZ(30px);
  background-color:blue;
}

@keyframes C_Anim_01 {
  0% {
    transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(59px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(100.5px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(100.5px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(100.5px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(-59px);}
}
@keyframes C_Anim_02 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(-59px);}
}
@keyframes C_Anim_03 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(59px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(100.5px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(100.5px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(100.5px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(0px);}
}
@keyframes C_Anim_04 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(59px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(100.5px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(100.5px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(100.5px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(-59px);}
}
@keyframes C_Anim_05 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(0px);}
}
@keyframes C_Anim_06 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(59px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(100.5px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(100.5px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(100.5px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(59px) translateZ(59px);}
}
@keyframes C_Anim_07 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(59px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(100.5px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(100.5px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(100.5px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(0px);}
}
@keyframes C_Anim_08 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(100.5px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(59px) translateZ(59px);}
}
@keyframes C_Anim_09 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(59px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(100.5px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(100.5px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(100.5px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(59px) translateZ(59px);}
}
@keyframes C_Anim_10 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(-59px);}
}
@keyframes C_Anim_11 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(-59px);}
}
@keyframes C_Anim_12 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(0px);}
}
@keyframes C_Anim_13 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(-59px);}
}

@keyframes C_Anim_15 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(0px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(0px) translateZ(59px);}
}
@keyframes C_Anim_16 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(0px);}
}
@keyframes C_Anim_17 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(0px) translateZ(59px);}
}
@keyframes C_Anim_18 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(0px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(0px) translateZ(59px);}
}
@keyframes C_Anim_19 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-59px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-100.5px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-100.5px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-100.5px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(-59px);}
}
@keyframes C_Anim_20 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(-59px);}
}
@keyframes C_Anim_21 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-59px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-100.5px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-100.5px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-100.5px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(0px);}
}
@keyframes C_Anim_22 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(-59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(-120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-59px) translateZ(-120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-100.5px) translateZ(-120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-100.5px) translateZ(-59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-100.5px) translateZ(-59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(-59px);}}
@keyframes C_Anim_23 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(0px);}
}
@keyframes C_Anim_24 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-59px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-100.5px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(120px) translateY(-100.5px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-100.5px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(59px) translateY(-59px) translateZ(59px);}
}
@keyframes C_Anim_25 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(0px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(0px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-59px) translateZ(0px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-100.5px) translateZ(0px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-100.5px) translateZ(0px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-100.5px) translateZ(0px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(0px);}
}
@keyframes C_Anim_26 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-100.5px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(0px) translateY(-59px) translateZ(59px);}
}
@keyframes C_Anim_27 {
  0% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(59px);}
  16.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(120px);}
  33.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-59px) translateZ(120px);}
  50% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-100.5px) translateZ(120px);}
  66.666% {transform: rotateX(-30deg) rotateY(45deg) translateX(-120px) translateY(-100.5px) translateZ(59px);}
  83.333% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-100.5px) translateZ(59px);}
  100% {transform: rotateX(-30deg) rotateY(45deg) translateX(-59px) translateY(-59px) translateZ(59px);}
}

Wire Cube

Wire Cube .HTML

<div class="container_wire">

<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="Cube_Wire">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>
<div class="B_T">
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
  <div class="Face_Wire"></div>
</div>

</div>

Wire Cube .css

.container_wire {
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(#99d0fb, #0415f6);
    position: relative;   
    width:  100%;       
    height: 080vh;     
    perspective:1200px; 
    overflow: hidden;
}
.Cube_Wire {
    position: absolute;
    width: 0;
    height:0;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(90deg) rotateY(90deg) scale(0.8); /* scaleを追加80%のサイズに縮小 */
    animation: rotation_16s 16s infinite linear;}
@keyframes     rotation_16s {
    from { transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg); }
    to　 { transform: translate(-50%, -50%) rotateX(090deg) rotateY(-180deg); }
}
.Cube_Wire:nth-child(01) {--edge: 01vmin; --delay: 0.0333333333s;}
.Cube_Wire:nth-child(02) {--edge: 03vmin; --delay: 0.0666666667s;}
.Cube_Wire:nth-child(03) {--edge: 05vmin; --delay: 0.1s;}
.Cube_Wire:nth-child(04) {--edge: 07vmin; --delay: 0.1333333333s;}
.Cube_Wire:nth-child(05) {--edge: 09vmin; --delay: 0.1666666667s;}
.Cube_Wire:nth-child(06) {--edge: 11vmin; --delay: 0.2s;}
.Cube_Wire:nth-child(07) {--edge: 13vmin; --delay: 0.2333333333s;}
.Cube_Wire:nth-child(08) {--edge: 15vmin; --delay: 0.2666666667s;}
.Cube_Wire:nth-child(09) {--edge: 17vmin; --delay: 0.3s;}
.Cube_Wire:nth-child(10) {--edge: 19vmin; --delay: 0.3333333333s;}
.Cube_Wire:nth-child(11) {--edge: 21vmin; --delay: 0.3666666667s;}
.Cube_Wire:nth-child(12) {--edge: 23vmin; --delay: 0.4s;}
.Cube_Wire:nth-child(13) {--edge: 25vmin; --delay: 0.4333333333s;}
.Cube_Wire:nth-child(14) {--edge: 27vmin; --delay: 0.4666666667s;}
.Cube_Wire:nth-child(15) {--edge: 29vmin; --delay: 0.5s;}
.Cube_Wire:nth-child(16) {--edge: 31vmin; --delay: 0.5333333333s;}
.Cube_Wire:nth-child(17) {--edge: 33vmin; --delay: 0.5666666667s;}
.Cube_Wire:nth-child(18) {--edge: 35vmin; --delay: 0.6s;}
.Cube_Wire:nth-child(19) {--edge: 37vmin; --delay: 0.6333333333s;}
.Cube_Wire:nth-child(20) {--edge: 39vmin; --delay: 0.6666666667s;}
.Cube_Wire:nth-child(21) {--edge: 41vmin; --delay: 0.7s;}
.Cube_Wire:nth-child(22) {--edge: 43vmin; --delay: 0.7333333333s;}
.Cube_Wire:nth-child(23) {--edge: 45vmin; --delay: 0.7666666667s;}
.Cube_Wire:nth-child(24) {--edge: 47vmin; --delay: 0.8s;}
.Cube_Wire:nth-child(25) {--edge: 49vmin; --delay: 0.8333333333s;}
.Cube_Wire:nth-child(26) {--edge: 51vmin; --delay: 0.8666666667s;}
.Cube_Wire:nth-child(27) {--edge: 53vmin; --delay: 0.9s;}
.Cube_Wire:nth-child(28) {--edge: 55vmin; --delay: 0.9333333333s;}
.Cube_Wire:nth-child(29) {--edge: 57vmin; --delay: 0.9666666667s;}
.Cube_Wire:nth-child(30) {--edge: 59vmin; --delay: 1s;}
     
.Face_Wire {
    --i: 0;
    position:absolute;
    margin:calc(-.5 * var(--edge));
    width:var(--edge);   
    height:var(--edge);
    border:1px solid aqua;
    transform: rotate3d(var(--i), calc(1 - var(--i)), 0, calc(var(--m, 0) * 90deg)) translateZ(calc(.5 * var(--edge)));
}

.Face_Wire:nth-child(n + 5) {--i: 1;} 

.Face_Wire:nth-child(2) {--m: 1;}
.Face_Wire:nth-child(3) {--m: 2;}
.Face_Wire:nth-child(4) {--m: 3;}
.Face_Wire:nth-child(5) {--m: pow(-1, 4);}
.Face_Wire:nth-child(6) {--m: pow(-1, 5);}

Cube in cube 5

Cube in cube .HTML

<div class="container_in_Cube">

<div class="wrapper_in">
  <div class="cube_in">
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
  </div>
</div>
<div class="wrapper_in">
  <div class="cube_in">
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
  </div>
</div>
<div class="wrapper_in">
  <div class="cube_in">
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
  </div>
</div>
<div class="wrapper_in">
  <div class="cube_in">
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
  </div>
</div>
<div class="wrapper_in">
  <div class="cube_in">
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
    <div class="part_in"></div>
  </div>
</div>

</div>

Cube in cube .css

/* Cube_in_Cube.css */

.container_in_Cube {
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(#99d0fb, #0415f6);
  position: relative;   
  width:  100%;        
  height: 30vh;        
  perspective: 1200px; 
  transform-style: preserve-3d; /* transform-style を追加 */
}
/*`perspective`の調整:コンテナ (`.container_in_Cube`)の`perspective`の値を調整することで、キューブの遠近感を調整し、表示位置を修正。*/
.wrapper_in:nth-child(1) {perspective:1200px;} /*{perspective:800px;}*/
.wrapper_in:nth-child(2) {perspective:1200px;} /*{perspective:800px;}*/
.wrapper_in:nth-child(3) {perspective:1200px;} /*{perspective:800px;}*/
.wrapper_in:nth-child(4) {perspective:1200px;} /*{perspective:800px;}*/
.wrapper_in:nth-child(5) {perspective:1200px;} /*{perspective:800px;}*/

.wrapper_in:nth-child(1) .cube_in {
  position:absolute;
  left:50%;
  top: 50%; /* キューブの中心をコンテナの中心に */
  width: 30px;
  height:30px;
  z-index: 1; /* z-indexを追加 */
  margin-left:-15px;
  margin-top: 145px; /* (30 / 2) - 0  translateZ は 0 なので調整不要 15px;➡ */
  z-index: 1;
  transform-style:preserve-3d;
  transform-origin: 50% 50%; /* transform-origin を指定 */
	animation:spin1_04s 4s infinite linear;  animation-delay: 0.05s;}
@keyframes  spin1_04s {100% {transform: rotateX(-360deg) rotateY(-360deg);}}

.wrapper_in:nth-child(2) .cube_in {
  position:absolute;
  left:50%;
  top: 50%;
  width: 60px;
  height:60px;
  z-index: 1; /* z-indexを追加 */
  margin-left:-30px;
  margin-top: 125px; /* (60 / 2) - 0  translateZ は 0 なので調整不要 30px;➡ */
  z-index: 1;
  transform-style:preserve-3d;
  transform-origin: 50% 50%; /* transform-origin を指定 */
	animation:spin2_06s 6s infinite linear;animation-delay:0.1s;}
@keyframes  spin2_06s {100% {transform: rotateX(360deg) rotateY(360deg);}}

.wrapper_in:nth-child(3) .cube_in {
  position:absolute;
  left:50%;
  top: 50%;
  width: 90px;
  height:90px;
  z-index: 1; /* z-indexを追加 */
  margin-left:-45px;
  margin-top: 110px; /* (90 / 2) - 0  translateZ は 0 なので調整不要 45px;➡ */
  z-index: 1;
  transform-style:preserve-3d;
  transform-origin: 50% 50%; /* transform-origin を指定 */
	animation:spin3_08s 8s infinite linear; animation-delay: 0.15s;}
@keyframes  spin3_08s {100% {transform: rotateX(-360deg) rotateY(-360deg);}}
 
.wrapper_in:nth-child(4) .cube_in {
  position:absolute;
  left:50%;
  top: 50%; /* キューブの中心をコンテナの中心に */
  width: 120px;
  height:120px;
  z-index: 1; /* z-indexを追加 */
  margin-left:-60px;
  margin-top:  95px; /* (120 / 2) - 0  translateZ は 0 なので調整不要 60px;➡ */
  z-index: 1;
  transform-style:preserve-3d;
  transform-origin: 50% 50%; /* transform-origin を指定 */
	animation:spin4_10s 10s infinite linear;animation-delay:0.2s;} 
@keyframes  spin4_10s {100% {transform: rotateX(360deg) rotateY(360deg);}}

.wrapper_in:nth-child(5) .cube_in {
  position:absolute;
  left:50%;
  top: 50%;
  width: 150px;
  height:150px;
  z-index: 1; /* z-indexを追加 */
  margin-left:-75px;
  margin-top:  75px; /* (150 / 2) - 0  translateZ は 0 なので調整不要 75px;➡ */
  z-index: 1;
  transform-style:preserve-3d;
  transform-origin: 50% 50%; /* transform-origin を指定 */
	animation:spin5_12s 12s infinite linear;animation-delay:0.25s;}
@keyframes  spin5_12s {100% {transform: rotateX(-360deg) rotateY(-360deg);}}

/*`part_in`のサイズがCubeのサイズよりも大きく、`box-shadow`も内側 (`inset`)に指定されている為、Cubeの表示領域が上方向に拡大され、コンテナからはみ出して表示されます➡調整*/
/*一番内側のCube*/
.wrapper_in:nth-child(1) .cube_in .part_in {
  position:absolute;
  box-shadow: inset 5px 5px 5px 5px white;/* ➡box-shadow の値を小さくする *//*元：0 0 15px 030px */
  width: 30px; /* cube_inのサイズ */
  height:30px; /* cube_inのサイズ */
  transform: rotateX(90deg) rotateY(0) translateZ(0); /* translateZ を 0 にする */
} 
.wrapper_in:nth-child(2) .cube_in .part_in {
  position:absolute;
  box-shadow: inset 5px 5px 5px 5px aqua; /* inset 0 5px 60px aqua; */
  width: 60px; /* cube_inのサイズ */
  height:60px; /* cube_inのサイズ */
  transform: rotateX(90deg) rotateY(0) translateZ(0); /* translateZ を 0 にする */
}  
.wrapper_in:nth-child(3) .cube_in .part_in {
  position:absolute;
  box-shadow: inset 5px 5px 5px 5px orange; /* inset 0 45px 90px red;➡orange; */
  width: 90px; /* cube_inのサイズ */
  height:90px; /* cube_inのサイズ */
  transform: rotateX(90deg) rotateY(0) translateZ(0); /* translateZ を 0 にする */
}
.wrapper_in:nth-child(4) .cube_in .part_in {
  position:absolute;
  box-shadow: inset 5px 5px 5px 5px lime; /* inset 0 5px 5px green;➡lime; */
  width: 120px; /* cube_inのサイズ */
  height:120px; /* cube_inのサイズ */
  transform: rotateX(90deg) rotateY(0) translateZ(0); /* translateZ を 0 にする */
}
/*一番外側のCube*/
.wrapper_in:nth-child(5) .cube_in .part_in {
  position:absolute;
  box-shadow: inset 6px 6px 6px 6px yellow; /* inset 0 5px 5px yellow; */
  width: 150px; /* cube_inのサイズ */
  height:150px; /* cube_inのサイズ */
  transform: rotateX(90deg) rotateY(0) translateZ(0); /* translateZ を 0 にする */
}

.wrapper_in:nth-child(1) .cube_in .part_in:nth-child(1) {transform:rotateX(90deg)   rotateY(0)      translateZ(15px);}
.wrapper_in:nth-child(1) .cube_in .part_in:nth-child(2) {transform:rotateX(0)       rotateY(0)      translateZ(15px);}
.wrapper_in:nth-child(1) .cube_in .part_in:nth-child(3) {transform:rotateX(0)       rotateY(180deg) translateZ(15px);}
.wrapper_in:nth-child(1) .cube_in .part_in:nth-child(4) {transform:rotateX(0)       rotateY(90deg)  translateZ(15px);}
.wrapper_in:nth-child(1) .cube_in .part_in:nth-child(5) {transform:rotateX(0)       rotateY(-90deg) translateZ(15px);}
.wrapper_in:nth-child(1) .cube_in .part_in:nth-child(6) {transform:rotateX(-90deg)  rotateY(0)      translateZ(15px);}

.wrapper_in:nth-child(2) .cube_in .part_in:nth-child(1) {transform:rotateX(90deg)   rotateY(0)      translateZ(30px);}
.wrapper_in:nth-child(2) .cube_in .part_in:nth-child(2) {transform:rotateX(0)       rotateY(0)      translateZ(30px);}
.wrapper_in:nth-child(2) .cube_in .part_in:nth-child(3) {transform:rotateX(0)       rotateY(180deg) translateZ(30px);}
.wrapper_in:nth-child(2) .cube_in .part_in:nth-child(4) {transform:rotateX(0)       rotateY(90deg)  translateZ(30px);}
.wrapper_in:nth-child(2) .cube_in .part_in:nth-child(5) {transform:rotateX(0)       rotateY(-90deg) translateZ(30px);}
.wrapper_in:nth-child(2) .cube_in .part_in:nth-child(6) {transform:rotateX(-90deg)  rotateY(0)      translateZ(30px);}

.wrapper_in:nth-child(3) .cube_in .part_in:nth-child(1) {transform:rotateX(90deg)   rotateY(0)      translateZ(45px);}
.wrapper_in:nth-child(3) .cube_in .part_in:nth-child(2) {transform:rotateX(0)       rotateY(0)      translateZ(45px);}
.wrapper_in:nth-child(3) .cube_in .part_in:nth-child(3) {transform:rotateX(0)       rotateY(180deg) translateZ(45px);}
.wrapper_in:nth-child(3) .cube_in .part_in:nth-child(4) {transform: rotateX(0)      rotateY(90deg)  translateZ(45px);}
.wrapper_in:nth-child(3) .cube_in .part_in:nth-child(5) {transform:rotateX(0)       rotateY(-90deg) translateZ(45px);}
.wrapper_in:nth-child(3) .cube_in .part_in:nth-child(6) {transform:rotateX(-90deg)  rotateY(0)      translateZ(45px);}

.wrapper_in:nth-child(4) .cube_in .part_in:nth-child(1) {transform:rotateX(90deg)   rotateY(0)      translateZ(60px);}
.wrapper_in:nth-child(4) .cube_in .part_in:nth-child(2) {transform:rotateX(0)       rotateY(0)      translateZ(60px);}
.wrapper_in:nth-child(4) .cube_in .part_in:nth-child(3) {transform:rotateX(0)       rotateY(180deg) translateZ(60px);}
.wrapper_in:nth-child(4) .cube_in .part_in:nth-child(4) {transform:rotateX(0)       rotateY(90deg)  translateZ(60px);}
.wrapper_in:nth-child(4) .cube_in .part_in:nth-child(5) {transform:rotateX(0)       rotateY(-90deg) translateZ(60px);}
.wrapper_in:nth-child(4) .cube_in .part_in:nth-child(6) {transform:rotateX(-90deg)  rotateY(0)      translateZ(60px);}

.wrapper_in:nth-child(5) .cube_in .part_in:nth-child(1) {transform:rotateX(90deg)   rotateY(0)      translateZ(75px);}
.wrapper_in:nth-child(5) .cube_in .part_in:nth-child(2) {transform:rotateX(0)       rotateY(0)      translateZ(75px);}
.wrapper_in:nth-child(5) .cube_in .part_in:nth-child(3) {transform:rotateX(0)       rotateY(180deg) translateZ(75px);}
.wrapper_in:nth-child(5) .cube_in .part_in:nth-child(4) {transform:rotateX(0)       rotateY(90deg)  translateZ(75px);}
.wrapper_in:nth-child(5) .cube_in .part_in:nth-child(5) {transform:rotateX(0)       rotateY(-90deg) translateZ(75px);}
.wrapper_in:nth-child(5) .cube_in .part_in:nth-child(6) {transform:rotateX(-90deg)  rotateY(0)      translateZ(75px);}

Rainbow.txt

８Cubeと、27Cubeでは、アニメーションの違い(遅延など)が分かる様に、各Cubeに番号を付けています。

Codeは、のクリックでクリップボードにCopyできます。

Base Cube

Base Cube

Base Cube HTML

HTML欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

<div class="body_J1">
  <div class="cubeJs">
    <div class="cube_jx" data-cube="312">
    <!-- data-cube="312"自体のcss定義はアニメーションが不要な場合不要。但し、class="cube_jx"定義と data-cube=""の連携と、HTML上にdata-cube="312"が無いと側面が透明になる-->
      <div class="cube_jx-wrap">
        <div class="cube_jx-top">
          <div style="color:red;font-weight:900;">Top</div>
          <div></div>
          <!--div class="shadow-flip" data-cube="212">shadow-flipは、アニメーション無しの場合不要。</div-->
          <div></div>
          <!--div class="shadow-y" data-cube="212">shadow-yは、アニメーション無しの場合不要。</div-->
        </div>
        <div>底面</div>
        <!--div class="cube_jx-bottom">.cube_jx-bottom定義はアニメーション無しの場合底面は隠れる為不要。</div-->
        <div class="cube_jx-front-left degY180"><!-- class.degY180が無いと文字の角度つけ及び文字が表示されない。pタグ又は、aタグのclass定義、又はstyle定義でも無効。別途cssで定義 -->
          <div style="color:yellow;font-weight:900;">左側</div>
        </div>
        <div class="cube_jx-front-right degX180"><!-- degX180は、別途cssで定義  -->
          <div style="color:white;font-weight:900;">右側</div>
        </div>
        <div>左奥</div><!--div class="cube_jx-back-left"> .cube_jx-back-left はアニメーション無しの場合、背面左側は隠れてしまう為不要。</div-->
        <div></div><!--div class="cube_jx-back-right">.cube_jx-back-right はアニメーション無しの場合、背面右側は隠れてしまう為不要。</div-->
      </div>
    </div>
  </div>
</div>

Base Cube CSS

css欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

.body_J1 {
  width:100%;
  height:30vh; /*height:100vh;:100%;*/
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  background: linear-gradient(to bottom right, #a4c5c7, #2D3F48);
}

.cubeJs {
  width: 10vmin;
  height: 10vmin;
  transform: rotateX(60deg) rotateZ(-45deg);
  backface-visibility: visible;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 9000px;
}

.cube_jx {
  height: 10vmin;
  width: 10vmin;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  position: absolute;
  top: 0;
  left: 0;
}

.cube_jx-top {overflow: hidden;}
.cube_jx-top:before {
  background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  background-size: 2px 100%, auto;
  background-repeat: no-repeat;
}

.cube_jx-top:after {
  color: red;      /* HTML上のstyle定義が有効にならないため */
  font-weight:900; /* HTML上のstyle定義が有効にならないため  */
  content: "上面"; /* content: "上面";HTML上の定義が表示されないため必要 */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(3, 252, 206);/* 上面カラー変更#DFF4F0; */
}

.cube_jx-front-left {
  transform-origin: left center;
  transform: rotateY(90deg);
  overflow: hidden;
}

.cube_jx-front-left:before {
  background-image: linear-gradient(to bottom, var(--color-flx-top), var(--color-flx-bottom)),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 100% 100%, 1px 100%; /* 各グラデーションに対してサイズを指定 */
  background-repeat: no-repeat;
  background-position: 0 0, right 0; /* 各グラデーションの位置を指定 */
  transform-origin: center right; /* 変形の基準点を調整 */
}

.degY180{display:flex;}
.degY180>div{transform: rotateY(180deg)}

.cube_jx-front-right {
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

.cube_jx-front-right:before {
  background-image: linear-gradient(to right, var(--color-frx-top), var(--color-frx-bottom));
  transform-origin: top;
}

.degX180{display:flex;}
.degX180>div{transform: rotateX(180deg)}

.cube_jx[data-cube^="1"] {
  top: calc(-10vmin - 2px);
  --color-bgx-top: rgb(160, 235, 165);
  --color-bgx-bottom: rgb(137, 228, 181);
  --color-flx-top: rgb(78, 188, 151);
  --color-flx-bottom: rgb(67, 178, 119);
}
.cube_jx[data-cube^="2"] {
  --color-bgx-top: rgb(137, 228, 181);
  --color-bgx-bottom: rgb(118, 229, 159);
  --color-flx-top: rgb(67, 178, 119);
  --color-flx-bottom: rgb(61, 169, 124);
}
.cube_jx[data-cube^="3"] {
  top: calc(10vmin + 2px);
  --color-bgx-top: rgb(118, 229, 159);
  --color-bgx-bottom: rgb(99, 212, 165);
  --color-flx-top: rgb(61, 169, 124);
  --color-flx-bottom: rgb(67, 159, 59);
}
.cube_jx[data-cube^="11"], .cube_jx[data-cube^="21"], .cube_jx[data-cube^="31"] {
  left: calc(-10vmin - 2px);
  --color-frx-top: rgb(45, 95, 59);
  --color-frx-bottom: rgb(45, 99, 57);
}
.cube_jx[data-cube^="12"], .cube_jx[data-cube^="22"], .cube_jx[data-cube^="32"] {
  --color-frx-top: rgb(45, 99, 57);
  --color-frx-bottom: rgb(42, 98, 59);
}
.cube_jx[data-cube^="13"], .cube_jx[data-cube^="23"], .cube_jx[data-cube^="33"] {
  left: calc(10vmin + 2px);
  --color-frx-top: rgb(42, 98, 59);
  --color-frx-bottom: rgb(42, 103, 44);
}
.cube_jx[data-cube$="2"] {transform: translateZ(calc(10vmin + 2px));}
.cube_jx[data-cube$="3"] {transform: translateZ(calc(-10vmin - 2px));}

[class^=cube_jx-] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  top: 0;
  left: 0;
}
[class^=cube_jx-], 
[class^=cube_jx-]:before {
  will-change: transform;
  animation: any 4s infinite both;
}
[class^=cube_jx-]:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.cube_jx > .cube_jx-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
}

Cube Animation

Cube 1：アニメーション

Cube Animation HTML

HTML欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

<div class="body_J1">
  <div class="cubeJs">
    <div class="cube_jy" data-cube="312">
      <div class="cube_jy-wrap">
        <div class="cube_jy-top">
          <div style="color:red;font-weight:900;"><div>Top</div></div>
          <div class="shadow-flip" data-cube="312"></div>
          <div class="shadow-y" data-cube="312"></div>
        </div>
        <div class="cube_jy-bottom"></div>
        <div class="cube_jy-front-left degY180">
          <div style="color:yellow;font-weight:900;">Left</div>
        </div>
        <div class="cube_jy-front-right degX180">
          <div style="color:white;font-weight:900;">Right</div>
        </div>
        <div></div><!--div class="cube_jy-back-left"-->
        <div></div><!--div class="cube_jy-back-right"-->
      </div>
    </div>
  </div>
</div>

Cube Animation css

CSS欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

.body_J1 {
  width:100%;
  height:30vh; /*height:100vh;:100%;*/
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  background: linear-gradient(to bottom right, #a4c5c7, #2D3F48);
}
.cubeJs {
  width: 10vmin;
  height: 10vmin;
  transform: rotateX(60deg) rotateZ(-45deg);
  backface-visibility: visible;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 9000px;
}
.degX180{display:flex;}
.degX180>div{transform: rotateX(180deg)}
.degY180{display:flex;}
.degY180>div{transform: rotateY(180deg)}

@keyframes shadow_y_animation4s {
  to, 
  40%, 
  60%, 
  80%, 
  from {transform: translateY(-100%) scale(2, 0.75);}
  20%  {transform: scale(2, 1);}
}

@keyframes shadow_y_inverse_animation4s {
  to, 
  40%, 
  60%, 
  80%, 
  from {opacity: 0.9;transform: scale(2, 1);}
  20%  {opacity: 0;transform: translateY(-100%) scale(2, 0.75);}
}

@keyframes shadow_flip_animation4s {
  from, 
  20%, 
  40%, 
  50%, 
  to  {transform: rotate(90deg);}
  45% {transform: rotate(270deg);}
}

@keyframes shadow_flip_inverse_animation4s {
  from, 
  20%, 
  40%, 
  50%, 
  to  {transform: rotate(0deg);opacity: 0;}
  45% {transform: rotate(-180deg);opacity: 0.6;}
}

@keyframes shadow_z_animation4s {
  from,
  40%,
  60%,
  80%,
  to { 
    transform: scale(var(--shadow-x-scale), 2); 
  }
  20% { 
    transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(calc(var(--shadow-x-scale, 1) / 2), 2); 
  }
}

@keyframes shadow_z_inverse_animation4s {
  40%, 
  60% { 
    transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(var(--shadow-x-scale, 1), 2); 
  }
  45% { 
    opacity: 0; 
  }
  from, 
  40%, 
  55% { 
    opacity: 0.5; 
  }
  to { 
    opacity: 1; 
  }
  from, 
  20%, 
  80%, 
  to { 
    transform: scale(2); 
  }
}

.cube_jy {
  height: 10vmin;
  width: 10vmin;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  position: absolute;
  top: 0;
  left: 0;
}
/*{表裏反転}*/
.cube_jy > .cube_jy-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  will-change: transform;
  animation: animation4s 4s infinite both;
}
/*{表裏反転}*/
@keyframes animation4s  {
  from, 
  to, 
  20%, 
  60% {animation-timing-function: step-start;transform: none;}
  40% {transform: rotateY(-1turn);}
}

.cube_jy[data-cube^="1"] {
  top: calc(-10vmin - 2px);
  --color-bgx-top: rgb(160, 235, 165);
  --color-bgx-bottom: rgb(137, 228, 181);
  --color-flx-top: rgb(78, 188, 151);
  --color-flx-bottom: rgb(67, 178, 119);
}
/* クラスcube_jyを持ち、data-cube属性が「1」で始まる要素にスタイルを適用する
 [data-cube^="1"]: data-cube属性の値が「1」で始まる要素を選択。例えば、data-cube="123"やdata-cube="1abc"といった属性値が対象。
 top: calc(-10vmin - 2px);
 top: 要素の上からの位置を指定。要素の上部を-10vmin - 2pxの位置に配置。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
 --color-bgx-top: カスタムプロパティ（CSS変数）として、背景の上部の色を設定。値はrgb(160, 235, 165)。
 --color-bgx-bottom: 背景の下部の色を設定。値はrgb(137, 228, 181)。
 --color-flx-top: 前面の上部の色を設定。値はrgb(78, 188, 151)。
 --color-flx-bottom: 前面の下部の色を設定。値はrgb(67, 178, 119)。	
*/

.cube_jy[data-cube^="2"] {
  --color-bgx-top: rgb(137, 228, 181);
  --color-bgx-bottom: rgb(118, 229, 159);
  --color-flx-top: rgb(67, 178, 119);
  --color-flx-bottom: rgb(61, 169, 124);
}

.cube_jy[data-cube^="3"] {
  top: calc(10vmin + 2px);
  --color-bgx-top: rgb(118, 229, 159);
  --color-bgx-bottom: rgb(99, 212, 165);
  --color-flx-top: rgb(61, 169, 124);
  --color-flx-bottom: rgb(67, 159, 59);
}

.cube_jy[data-cube^="11"], .cube_jy[data-cube^="21"], .cube_jy[data-cube^="31"] {
  left: calc(-10vmin - 2px);
  --color-frx-top: rgb(45, 95, 59);
  --color-frx-bottom: rgb(45, 99, 57);
}
/*
  クラスcube_jyを持ち、data-cube属性が「11」、「21」、「31」で始まる要素にスタイルを適用
  [data-cube^="11"], [data-cube^="21"], [data-cube^="31"]: data-cube属性の値がそれぞれ「11」、「21」、「31」で始まる要素を選択。
  このセレクターによって、複数の条件に一致する要素に対して同じスタイルを適用。
  left: calc(-10vmin - 2px);
　left: 要素の左からの位置を指定。要素の左側を-10vmin - 2pxの位置に配置。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
　--color-frx-top: カスタムプロパティ（CSS変数）として、前面の上部の色を設定。値はrgb(45, 95, 59)。
　--color-frx-bottom: 前面の下部の色を設定。値はrgb(45, 99, 57)。
　このCSSは、クラスcube_jyを持ち、data-cube属性が「11」、「21」、「31」で始まる要素に対してスタイルを適用：
*/

.cube_jy[data-cube^="12"], .cube_jy[data-cube^="22"], .cube_jy[data-cube^="32"] {
  --color-frx-top: rgb(45, 99, 57);
  --color-frx-bottom: rgb(42, 98, 59);
}

.cube_jy[data-cube^="13"], .cube_jy[data-cube^="23"], .cube_jy[data-cube^="33"] {
  left: calc(10vmin + 2px);
  --color-frx-top: rgb(42, 98, 59);
  --color-frx-bottom: rgb(42, 103, 44);
}

.cube_jy[data-cube$="2"] {transform: translateZ(calc(10vmin + 2px));}
/*
  クラスcube_jyを持ち、data-cube属性が「2」で終わる要素にスタイルを適用.
  [data-cube$="2"]: data-cube属性の値が「2」で終わる要素を選択
  transform: translateZ(calc(10vmin + 2px));
  transform: 要素に2Dまたは3D変換を適用。
  translateZ(calc(10vmin + 2px)): 要素をZ軸方向（画面の奥行き方向）に移動させる。
  具体的には、10vminに2pxを加えた距離だけZ軸方向に移動。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
*/

.cube_jy[data-cube$="3"] {
  transform: translateZ(calc(-10vmin - 2px));
}

[class^=cube_jy-] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  top: 0;
  left: 0;
}
/* cube_jy-で始まるすべての要素に対してスタイルを適用する
　[class^=cube_jy-]: クラス名がcube_jy-で始まるすべての要素を選択。例えば、cube_jy-frontやcube_jy-bottomなどが対象。
　　要素を絶対位置に配置し、親要素の左上隅に位置付け。
　　幅と高さを親要素の100%に設定。背面を表示するように設定。
 */
[class^=cube_jy-], 
[class^=cube_jy-]::before {
  will-change: transform;
  animation: any 4s infinite both;
}

[class^=cube_jy-]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.cube_jy-top {
  overflow: hidden;
  animation-name: top_animation;/*アニメーション*/
}
/*{上面の縦方向縮小表示}*/
@keyframes top_animation {
  20% {transform: translateZ(calc(-10vmin + 2vmin));}
  40%, 
  60%, 
  80% {transform: none;}
}
.cube_jy-top::before, 
.cube_jy-top::after {will-change: transform;}

.cube_jy-top::before {
  background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  background-size: 2px 100%, auto;
  background-repeat: no-repeat;
}

.cube_jy-top::after {
  color: red;     /* HTML上のstyle定義が有効にならないため */
  font-weight:900;/* HTML上のstyle定義が有効にならないため  */
  content: "Top"; /* content:"上面";HTML上の定義が表示されないため*/
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(3, 252, 206);/* 上面カラー変更#DFF4F0; */
  animation: top_flash_animation4S 4s infinite both;
}
/*{Topフラッシュ}*/
@keyframes top_flash_animation4S {
  from, 
  50%, 
  60%, 
  to {opacity: 0;}
  52% {opacity: 0.9;}
}

.cube_jy-front-left {
  transform-origin: left center;
  transform: rotateY(90deg);
  overflow: hidden;
}

.cube_jy-front-left::before {
  background-image: linear-gradient(to bottom, var(--color-flx-top), var(--color-flx-bottom)),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 100% 100%, 1px 100%; /* 各グラデーションに対してサイズを指定 */
  background-repeat: no-repeat;
  background-position: 0 0, right 0; /* 各グラデーションの位置を指定 */
  transform-origin: center right; /* 変形の基準点を調整 */
  will-change: transform;
  animation-name: front_left_animation;
}
/*{前左側縮小表示}*/
@keyframes front_left_animation  {
  20% {transform: scaleX(0.2);}
  40%, 
  60% {transform: translateX(-8vmin) scaleX(0.2);}
  80% {transform: none;}
}

.cube_jy-front-right {
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

.cube_jy-front-right::before {
  background-image: linear-gradient(to right, var(--color-frx-top), var(--color-frx-bottom));
  transform-origin: top;
  will-change: transform;
  animation-name: front_right_animation;
}
/*{前右側縮小表示}*/
@keyframes front_right_animation  {
  20% {transform: scaleY(0.2);}
  40%, 
  60% {transform: translateY(8vmin) scaleY(0.2);}
  80% {transform: none;}
}

.cube_jy-bottom {
  transform: translateZ(-10vmin);
  background-image: linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  animation-name: bottom_animation;
}
/*{bottomの表示}*/
@keyframes bottom_animation {
  from, 
  20%, 
  80%, 
  to  {transform: translateZ(calc(-10vmin + 1px)) scale(0.95);}
  40%, 
  60% {transform: translateZ(-2vmin) scale(0.95);}
}

.cube_jy-bottom::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DFF4F0;
  will-change: transform;
  animation: bottom_flash_animation4s 4s infinite both;
}
/*{bottomのフラッシュ}*/
@keyframes bottom_flash_animation4s {
  from, 
  40%, 
  50%, 
  to  {opacity: 0;}
  45% {opacity: 0.9;}
}
/* animation-delay: 248ms; */
.cube_jy[data-cube="312"] > .cube_jy-wrap, 
.cube_jy[data-cube="312"] > .cube_jy-wrap::before, 
.cube_jy[data-cube="312"] > .cube_jy-wrap::after, 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-], 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::before, 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::after {animation-delay: 248ms;}
.cube_jy[data-cube="312"] > .cube_jy-wrap [class^=shadow-] {animation-delay: 248ms;}
/* 特定の属性とクラスを持つ要素およびその子要素、さらにその擬似要素に対して、
   統一してアニメーション遅延適用。指定された要素のアニメーションが248ミリ秒遅れてから始まる。*/
/*
セレクターの部分
1.cube_jy[data-cube="312"] > .cube_jy-wrap
  classがcube_jyで、data-cube属性が312の要素の直下にある、.cube_jy-wrapの要素を選択。
2.cube_jy[data-cube="312"] > .cube_jy-wrap::before
  上記の要素の:::before擬似要素を選択。
3.cube_jy[data-cube="312"] > .cube_jy-wrap::after
  上記の要素の:::after擬似要素を選択。
4.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]
  上記の要素の子要素で、.cube_jy-で始まるすべての要素を選択。
5.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::before
  その中の:::before擬似要素を選択。
6.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::after
  その中の:::after擬似要素を選択。
*/

8 Cube’s

8 Cube’s

27 Cube’s

27 Cube’s

.gif画像とanimation.txtの合成

HTML

<div class="body-x tac">
<span class="text_background ta_c" style="font-size:200px;font-weight:bolder;">Cube</span>
</div>

css

.body-x {
  width: 900px; /* width:100%; */
  height: 800px; /* hight:100%;  height: 100vh; */
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://xn--ecka7j.biz/wp-content/uploads/2025/02/A1_w900-h800-5.64mb.gif");
 /*background-size:cover; 画像のサイズを指定、必要に応じて変更 */
 /*background-size:auto;  画像のサイズを実際のサイズにする */
  background-repeat: no-repeat; /* 繰り返しの有無を指定 */
  background-position: center center; /* 画像の位置を指定 */
}

.text_background {
    width:      100%;
    color: transparent;
    -webkit-background-clip: text;
    background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
  animation : rainbow_10s 10s linear infinite; }
@keyframes  rainbow_10s {
        0% { background-position: 0 0 }
    100% { background-position: 600px 0px } }
/* -webkit-が無いと、虹色グラデーションのみになる 2022/01/10 */

　Webサイトやブログで「もう少しだけ、この色を添えたい」と思ったことはありませんか？
微妙なニュアンスを表現できるグラデーションカラーは、デザインの可能性を無限に広げてくれます。

しかし、色の選択は時に迷路のよう。
例えば、同じカラーコード #00FFFFでも、
※．アクア 「 Aqua」や、シアン 「 Cyan」といった異なる呼び名が存在します。

また、「Medium spring green」のように、同じ名前でも
※．「 Medium_springgreen　」#00FA9A：（薄い緑系）と、
※．「 Medium_Spring_Green」#348017：（濃い緑系）のように、カラーコードが異なる場合もあります。

日本の伝統色である和色は、その繊細な色合いと美しい名称で、私たちの心を魅了します。
※．「濃紺」：「 のうこん」#1F2F54で「 Navy blue」とも呼ばれますが、
※．「 Navy」または、「 Navy blue」でも #000080という別の色も存在します。

瑠璃紺：※． るりこん：#19448E　と、
紺瑠璃：※． こんるり：#213380のように、似たような名前でもわずかに異なる色合いを持つ和色は、日本文化の奥深さを感じさせます。

この記事は、そんな色の迷宮をさまようあなたのための備忘録です。まだRGB表示は準備中ですが、色の名前とカラーコードの対応を整理し、あなたの創造性を刺激する色彩パレットを提供します。

中には、まだ名前が分からず、カラーコードをそのまま呼んでいる色もあります。例えば、
※． #000033は、z003、・・・、
※． #0033FFは、z03f、・・・まるで宝探しのように、色と名前の組み合わせを探求する過程もまた、デザインの醍醐味の一つです。あなただけの特別な色を見つけ、日々の創作活動に彩りを添えてみませんか？

カラーコード順に並べてみたところ、新たな発見もありました。
それは、別系統の色が間に含まれていることです。　
ほかにも、
様々な違いがある様です（次の章でいくつか挙げますが、）あなたに、ご興味があったら探してみてください。
※．アンダーライン部分は、クリックで直接そのカラーにジャンプして色合いを確認できます。
※．各カラー内の、上向きアイコン（ 　　　 ）のクリックで、該当の指定個所に戻ります。

和色パレット：日本の伝統色をRGBで探す｜色名・読み・コードで、1文字でも簡単検索 Sortも系・色名・読み・コード・RGBで

並び替え機能、文字列検索の機能を追加しました。日本の豊かな色彩文化を凝縮。古来より愛されてきた繊細な和色の数々を、1文字の入力でも簡単に探し出せます。「あの時、心惹かれた色はなんという名前だろう？」「このイメージにぴったりの日本の伝統色を見...

イイネ.biz

2025.06.05

別の記事、

デザイン：日本の伝統色(抜粋&RGBコード)、ほかの代表的なカラーグループも系統ごとにまとめ

デザインで使える日本の伝統的な色を抜粋してコード化とRGB表示でまとめてみました。ほかにも代表的な色を系統ごとにまとめてテーブル表示しています。あなたのウェブサイトデザインにお役立てください。日本の伝統色「抜粋」　日本の伝統色色の名前よみか...

イイネ.biz

2024.01.04

では、日本の伝統色のほか、カラーグループ１，カラーグループ２，などの色見本を載せていますが、
それぞれの色の境目、色合いなども含め、併せて参照していただければと思います。

「16進カラーコード」とカラーの関係

以下で一部のコードについて、関連や違いを抜粋しています。

　同コードで/別名2

同じコードで、複数のカラーの呼び名があります。
#FF00FF　で
Fuchsia（フクシア）　と　 Magenta（マゼンタ）

#FFEDCD　で
Blanche dalmond（ブランシュ・ダルモンド）　と　
Blanched Almond（アーモンド）

#FFFFE0　で
LightYellow（薄黄色）　と　 ivory（アイボリー象牙色）

　同名/別コード2

同じカラー名で、複数の色合いがあります。
Gray（#736F6E）　#736F6E　と　
Gray（#808080）　#808080
　
Maroon マルーン(ブラウン系)　　　　 #800000　と
Maroon マルーン(オレンジ・レッド系) #810541

Light blueライトブルー　 #ADD8E6　と
Light Blueライトブルー　 #ADDFFF　と
水色（みずいろ）light blue #BCE2E8

Powder_blue(#B0E0E6) #B0E0E6　と
Powder_Blue(#C6DEFF) #C6DEFF

　和名/英語表記

次は、日本の色名と英語表記で、どうなのかを見てみましょう（ここではGoogle翻訳を使います）
青　（blue）　#0095D9　と　 Blue　（青）　#0000FF

黄色(yellow)　#FFD900　と　 Yellow(黄色)　#FFFF00

黄金(こがね)　#E6B422　と　 Gold　 (黄金)　#FFD7000

紫 (Purple)　#884898　と　 Purple (紫)　#800080

きみどり（Yellow Green）　#B8D200　と　 Yellow Green（黄緑）　#52D017

　「和色 : 絶妙なおもむき

　同じ文字で読み方違いで別の色:
日本の伝統色や微妙な色使いを一般に「色名」または「色彩名称」と呼ぶことが多いです。特に、日本の伝統的な色名には、同じ名称でも微妙に異なる色合いが存在することがあります。これらの微妙な色の違いを含む色彩表現は、「和色（わしょく）」とも呼ばれることがあります。
べに　　（紅）　#CF3525　と　
くれない（紅）　#D7003A

「和色（わしょく）

日本の伝統色には、非常に多くの美しい色名があります。以下にいくつかの代表的な色とそのカラーコードを紹介します：

ここで、#で始まるコード部分をクリックすると、コード順Tableの該当位置にジャンプします。（和色）が、どの他のカラーに近いかが、わかると思います。
また、ジャンプ先での#で始まるコード部分をクリックすると、ここの位置に戻ってきます。

紺色がつく和色

RGB部分をクリックすると、コード順Tableの該当位置にジャンプします。紺がつく和色が、他のどのカラーに近いかが、わかると思います。
また、ジャンプ先でRGB部分をクリックすると、ここの位置に戻ってきます。

和色を追加＆RGBコード追加

同コード・異色名(異名)の確認は⇊

和色パレット：日本の伝統色をRGBで探す｜色名・読み・コードで、1文字でも簡単検索 Sortも系・色名・読み・コード・RGBで

並び替え機能、文字列検索の機能を追加しました。日本の豊かな色彩文化を凝縮。古来より愛されてきた繊細な和色の数々を、1文字の入力でも簡単に探し出せます。「あの時、心惹かれた色はなんという名前だろう？」「このイメージにぴったりの日本の伝統色を見...

イイネ.biz

2025.06.05

カラーコード テーブル

　Table Last に進む