Thank you for reading this post, don't forget to subscribe!
３Dデザインで回転するCubeの色々、
最初の６つは、2累乗(0～5)（1,2,4,8,16,32）秒で回転するCubeです。
（CSSのanimation:rotate_s 1s linear infinite; ～ でコントロール ）
次は、変則的（厳密にはCubeとは言えないけど,
変形）Super Manでは「ファントム ゾーン」で表現されたもの
そして、Cube in Cubeです。
（Cubeの中にもう一つのCube、更に、 Cube Cube Cube ）
01
02
03
04
05
06
11
12
13
14
15
16
21
22
23
24
25
26
31
32
33
34
35
36
41
42
43
44
45
46
51
52
53
54
55
56
Cube Cube Cube
11
12
13
14
15
16
Phantom-zone 2
01
02
03
04
05
06
Cube in Cube
31
32
33
34
35
36
cssを公開
以下のソースコード欄にカーソルを持っていくと、右上部に Copyアイコンが表示されます。
Copyアイコンのクリックでソースコードがクリップボードにコピーされますので、あなたのSiteで利用することもできます。
.container_6j {display:flex;flex-wrap:wrap;height:120vh;width:100%;
background: linear-gradient(180deg,
rgba(007,012,174,1.00) 0%,
rgba(010,017,250,0.35) 80%);
font-family: 'Montserrat', sans-serif;
color:white; overflow: hidden;
font-size: 90%; text-align: center;
padding-top: 50px; padding-left: 50px; }
.cube_6j {margin:20px; width:77px; height:77px; position:relative; transform-style:preserve-3d; transform:rotateX(180deg) rotateY(-180deg); }
.cube_6j div {width: 70%; height: 70%; position:absolute; display:flex; justify-content:center; align-items:center; color:#FFF; font-size: 50px; }
.cube_6j div:nth-child(1) {background:rgba(255,127,127,0.7); transform: translateZ(30px); }
.cube_6j div:nth-child(2) {background:rgba(255,127,255,0.7); transform:rotateY(180deg) translateZ(30px); }
.cube_6j div:nth-child(3) {background:rgba(127,127,255,0.7); transform:rotateY(090deg) translateZ(30px); }
.cube_6j div:nth-child(4) {background:rgba(127,255,255,0.7); transform:rotateY(-90deg) translateZ(30px); }
.cube_6j div:nth-child(5) {background:rgba(191,255,127,0.7); transform:rotateX(090deg) translateZ(30px); }
.cube_6j div:nth-child(6) {background:rgba(255,191,127,0.7); transform:rotateX(-90deg) translateZ(30px); }
.cube_6j:nth-child(1) {animation:rotate_s 1s linear infinite; }
.cube_6j:nth-child(2) {animation:rotate_s 2s linear infinite; }
.cube_6j:nth-child(3) {animation:rotate_s 4s linear infinite; }
.cube_6j:nth-child(4) {animation:rotate_s 8s linear infinite; }
.cube_6j:nth-child(5) {animation:rotate_s 16s linear infinite; }
.cube_6j:nth-child(6) {animation:rotate_s 32s linear infinite; }
.container_7j {display:flex; flex-wrap:wrap;}
.cube_7j {margin: 20px; width: 77px; height: 77px; position:relative; transform-style:preserve-3d; transform:rotateX(-25deg) rotateY(-25deg) ;}
.cube_7j div {width: 70%; height: 70%; position:absolute; display:flex; justify-content:center; align-items:center; color:#FFF; font-size: 50px;}
.cube_7j div:nth-child(1) {background:rgba(255,127,127,0.8); transform: translateZ(30px); }
.cube_7j div:nth-child(2) {background:rgba(255,127,255,0.8); transform:rotateY(180deg) translateZ(30px); }
.cube_7j div:nth-child(3) {background:rgba(127,127,255,0.8); transform:rotateY(090deg) translateZ(30px); }
.cube_7j div:nth-child(4) {background:rgba(127,255,255,0.8); transform:rotateY(-90deg) translateZ(30px); }
.cube_7j div:nth-child(5) {background:rgba(191,255,127,0.8); transform:rotateX(090deg) translateZ(30px); }
.cube_7j div:nth-child(6) {background:rgba(255,191,127,0.8); transform:rotateX(-90deg) translateZ(30px); }
.cube_7j:nth-child(1) {animation: rotate_s 1s linear infinite; }
.cube_7j:nth-child(2) {animation: rotate_s 2s linear infinite; }
.cube_7j:nth-child(3) {animation: rotate_s 4s linear infinite; }
.cube_7j:nth-child(4) {animation: rotate_s 8s linear infinite; }
.cube_7j:nth-child(5) {animation: rotate_s 16s linear infinite; }
.cube_7j:nth-child(6) {animation: rotate_s 32s linear infinite; }
.cube_bj {margin: 10px; width:250px; height:250px; position:relative; transform-style:preserve-3d; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; }
.cube_bj div {width: 77%; height: 77%; position:absolute; display:flex; justify-content:center; align-items:center; color:#FFF; font-size: 50px; }
.cube_bj div:nth-child(1) {background:rgba(255,127,127,0.55); transform: translateZ(89px); }
.cube_bj div:nth-child(2) {background:rgba(255,127,255,0.45); transform:rotateY(180deg) translateZ(89px); }
.cube_bj div:nth-child(3) {background:rgba(127,127,255,0.55); transform:rotateY( 90deg) translateZ(89px); }
.cube_bj div:nth-child(4) {background:rgba(127,255,255,0.45); transform:rotateY(-90deg) translateZ(89px); }
.cube_bj div:nth-child(5) {background:rgba(191,255,127,0.55); transform:rotateX( 90deg) translateZ(89px); }
.cube_bj div:nth-child(6) {background:rgba(255,191,127,0.45); transform:rotateX(-90deg) translateZ(89px); }
.cube_bj:nth-child(1) {animation:rotate_s 1s linear infinite; }
.cube_bj:nth-child(2) {animation:rotate_s 2s linear infinite; }
.cube_bj:nth-child(3) {animation:rotate_s 4s linear infinite; }
.cube_bj:nth-child(4) {animation:rotate_s 8s linear infinite; }
.cube_bj:nth-child(5) {animation:rotate_s 16s linear infinite; }
.cube_bj:nth-child(6) {animation:rotate_s 32s linear infinite; }
.container_cj {display:flex; flex-wrap:wrap; animation:rotate_s 32s linear infinite alternate; }
.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); }
.container_dj {display:flex; flex-wrap:wrap; animation:rotate_s 08s linear infinite; }
.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); }
@keyframes rotate_s { 0%{transform:rotateX(0) rotateY(0);} 100%{transform:rotateX(-360deg) rotateY(360deg);} }
.box {position:relative; transform-style:preserve-3d;
top:calc(var(--size) / 2 * 1px);
left:calc(var(--size) / 2 * 1px);
width:calc(var(--size) * 1px);
height:calc(var(--size) * 1px);
animation:rotate_s var(--duration) linear infinite; }
.box_l_1 {margin-left:100px; margin-top:100px; --duration:32s; --size:280; --opacity:0.25; top:0; left:0; }
.box_m_2 {--duration:16s; --size:140; --opacity:0.40; }
.box_s_3 {--duration: 4s; --size: 75; --opacity:1.00; }
.face {width:100%; height:100%; position:absolute; font-size:45px; font-weight:900; color:#fff; text-align:center; backface-visibility:inherit; }
.front {background:rgba(128,128,000,var(--opacity)); color:rgba(255,127,127,1.0); transform: translateZ(calc(var(--size) / 2 * 1px));}
.back {background:rgba(000,255,000,var(--opacity)); color:rgba(255,127,255,1.0); transform:rotateY(180deg) translateZ(calc(var(--size) / 2 * 1px));}
.right {background:rgba(000,000,255,var(--opacity)); color:rgba(127,127,255,1.0); transform:rotateY( 90deg) translateZ(calc(var(--size) / 2 * 1px));}
.left {background:rgba(000,255,255,var(--opacity)); color:rgba(127,255,255,1.0); transform:rotateY(-90deg) translateZ(calc(var(--size) / 2 * 1px));}
.top {background:rgba(255,255,000,var(--opacity)); color:rgba(191,255,127,1.0); transform:rotateX( 90deg) translateZ(calc(var(--size) / 2 * 1px));}
.bottom {background:rgba(128,000,128,var(--opacity)); color:rgba(255,191,127,1.0); transform:rotateX(-90deg) translateZ(calc(var(--size) / 2 * 1px));}
.ml05 {margin-left:05px;}
.mr05 {margin-right:05px;}
.ml10mt10 {margin-left:10px; margin-top:10px;}
.ml10mt50 {margin-left:10px; margin-top:50px;}HTMLは
<div class="container_6j">
<div class="cube_6j"><div><span>01</span></div><div><span>02</span></div><div><span>03</span></div><div><span>04</span></div><div><span>05</span></div><div><span>06</span></div></div>
<div class="cube_6j"><div><span>11</span></div><div><span>12</span></div><div><span>13</span></div><div><span>14</span></div><div><span>15</span></div><div><span>16</span></div></div>
<div class="cube_6j"><div><span>21</span></div><div><span>22</span></div><div><span>23</span></div><div><span>24</span></div><div><span>25</span></div><div><span>26</span></div></div>
<div class="cube_6j"><div><span>31</span></div><div><span>32</span></div><div><span>33</span></div><div><span>34</span></div><div><span>35</span></div><div><span>36</span></div></div>
<div class="cube_6j"><div><span>41</span></div><div><span>42</span></div><div><span>43</span></div><div><span>44</span></div><div><span>45</span></div><div><span>46</span></div></div>
<div class="cube_6j"><div><span>51</span></div><div><span>52</span></div><div><span>53</span></div><div><span>54</span></div><div><span>55</span></div><div><span>56</span></div></div>
<p style="color: white;" class="mr05">Cube <b>Cube</b> Cube</p>
<br><p style="color: white;" class="ml10mt10"></p>
<div class="container_7j"><div></div><div></div><div></div><div></div><div></div><div class="cube_bj"><div><div class="cube_7j"></div><div class="cube_7j"></div><div class="cube_7j"></div><div class="cube_7j"><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div></div><div class="cube_7j"></div><div class="cube_7j"></div></div></div></div>
<br><p style="color: white;" class="ml05">Phantom-zone <b>2</b></p>
<div class="container_cj cube_cj"><div></div><div></div><div></div><div></div><div></div><div class="container_dj cube_dj"><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div></div>
<div><p style="color: white;">Cube <b>in</b> Cube</p></div>
<div class="box box_l_1">
<div class="face front"></div><div class="face back"></div><div class="face right"></div><div class="face left"></div><div class="face top"></div><div class="face bottom"></div>
<div class="box box_m_2">
<div class="face front"></div><div class="face back"></div><div class="face right"></div><div class="face left"></div><div class="face top"></div><div class="face bottom"></div>
<div class="box box_s_3">
<div class="face front">31</div><div class="face back">32</div><div class="face right">33</div><div class="face left">34</div><div class="face top">35</div><div class="face bottom">36</div>
</div>
</div>
</div>
</div>こんなことも！
FRONT
BACK
RIGHT
LEFT
TOP
BOTTOM
