3Dデザイン Cube Cube Cube & Phantom-Zone. cssも公開

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

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

3Dデザインで回転するCubeの色々、
 最初の6つは、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
PR広告

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>
PR広告

こんなことも!

FRONT
BACK
RIGHT
LEFT
TOP
BOTTOM