Design Cube Cube Cube ➡HTMLとCSSのコードもCopyできます。

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

今回は、４種の異なるアニメーションCubeをご紹介します。
あなたのPCに、コードをコピーして、動きを楽しんでみませんか？

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

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

　８Cube’sと 9Cube’s x 6Faceは、カラークリスタル調のCubeを360度回転。　27Cube’sは、上下左右に分割して再結合を繰り返し、 Wire Cubeは、正にワイヤーで形作られたCubeで360度回転で立体的な表現。　Cube in cubeは、 5つの大きさの異なる・色で縁取りされたCubeの回転をそれぞれのCube内で行っています。Rainbow.txtは虹色文字アニメーションです。

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

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

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

Cube’s

8 Cube’s

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

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

01
01
01
02
02
02
03
03
03
04
04
04
05
05
05
06
06
06
07
07
07
08
08
08
09
09
09
10
10
10
11
11
11
12
12
12
13
13
13
14
14
14
15
15
15
16
16
16
17
17
17
18
18
18
19
19
19
20
20
20
21
21
21
22
22
22
23
23
23
24
24
24
25
26
25
26
26
26
27
27
27

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);}
PR広告

Rainbow.txt

Cube

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