Design 回転する Cube Cube Cube & HTMLとcssの解説とCopy to Clipboard

Cube css ：デザイン
Cube
記事内に広告が含まれています。

Webページにダイナミックな動きと鮮やかな色彩を加えたいと思ったことはありませんか？CSSアニメーションを使えば、あなたのWebページをより魅力的にすることができます。今回は、その中でも特に目を引く、虹色グラデーションで回転するCubeとテキストアニメーションの作成方法をご紹介します。CSSの各プロパティ部分には、解説も含んでいます。

Thank you for reading this post, don't forget to subscribe!

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

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

PR広告
PR広告

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() の各関数によって、反復グラデーションを生成することもできます。*/
PR広告

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

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

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

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

Front

Back

Right

Left

Top

Bottom

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面の文字数によってborderサイズ、borderのアニメーション速度を指定

Front
前

Back
後

Right
右

Left
左

Top
上

Bottom
下

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

01
02
03
04
05
06

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 背景色半透明

Fr Ba Ri Le To Bo 背景色半透明
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 in Cube
11
12
13
14
15
16
01
02
03
04
05
06

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毎の、回転速度、サイズ、透明度
.L_Cube_1 {–duration:32s; –size:280; –opacity:0.25;}
.M_Cube_2 {–duration:16s; –size:140; –opacity:0.50;}
.S_Cube_3 {–duration: 4s; –size: 75; –opacity:1.00;}
1
2
3
4
5
6
a1
b2
c3
d4
e5
f6
31
32
33
34
35
36

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

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

■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□
PR広告
GEEKOM
タイトルとURLをコピーしました