聊代碼（第八十集）css樣式（之五十） 下面，是個(gè)封閉式《旋轉(zhuǎn)立方體菊花圖》，其立方體內(nèi)嵌有“中秋快樂”動(dòng)圖，后襯漸變背景，請(qǐng)欣賞。
代碼：
＜style type="text/css"＞*{
margin:0 auto;
}
@keyframes 轉(zhuǎn){
0%{transform:rotateX(0deg) rotateY(0deg);}
100%{transform:rotateX(360deg) rotateY(360deg);}
}
.背景色{
width:700px; height: 550px;
background:linear-gradient(#0f0 30%,#ff0 80% );/*漸變背景色*/
}
.wrap{
margin-top:100px; bottow:300px; /*立方體的外邊距*/
.立方體{
width:300px; /*立方體面的寬*/
height:300px; /*立方體面的高*/
position:relative; /*相對(duì)定位*/
transform-style:preserve-3d; /* 默認(rèn)flat 2D */
transform:rotateX(-30deg) rotateY(-70deg); animation:rotate 25s infinite linear; /*播放時(shí)間 播放次數(shù)為循環(huán) 緩動(dòng)效果為勻速 */
}
.立方體 div{
width:100%;
height:100%;
border:2px solid #f00; /*立方體的邊框線顏色*/
position:absolute; /*絕對(duì)定位*/
background-color:#999; /*立方體顏色*/
opacity:.6; /*透明度*/
}
.立方體 .前{ transform: translateZ(150px);/*立方體表面定位*/ }
.立方體 .后{ transform: translateZ(-150px) rotateY(180deg);/*立方體表面定位*/ }
.立方體 .左{ transform: translateX(-150px) rotateY(-90deg);/*立方體表面定位*/ }
.立方體 .右{ transform: translateX(150px) rotateY(90deg);/*立方體表面定位*/ }
.立方體 .上{transform: translateY(-150px) rotateX(90deg);/*立方體表面定位*/}
.立方體 .下{ transform: translateY(150px) rotateX(-90deg);/*立方體表面定位*/ }
.立方體 .中{ transform: translateY(0px) rotateX(0deg);/*立方體內(nèi)圖片定位*/ }
＜/style＞
＜div class="背景色"＞
＜div class="立方體"＞
＜div class="前"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1509/252084939_1_20220915090132211.jpg" /＞＜/div＞
＜div class="后"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1509/252084939_2_20220915090132446.jpg" /＞＜/div＞
＜div class="左"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1509/252084939_3_20220915090132586.jpg" /＞＜/div＞
＜div class="右"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1509/252084939_4_20220915090132743.jpg" /＞＜/div＞
＜div class="上"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1509/252084939_5_20220915090132868.jpg" /＞＜/div＞
＜div class="下"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1509/252084939_6_20220915090132992.jpg" /＞＜/div＞
＜div class="中"＞＜img src="//image109.360doc.com/DownloadImg/2022/09/1509/252084939_7_20220915090133118.gif" /＞＜/div＞
＜/div＞
＜/div＞
＜/div＞
代碼解析：
立方體有六個(gè)面，六個(gè)面是以不同的角度，不同的位置構(gòu)成立方體的。因?yàn)檫@個(gè)，我們不得不討論一下它的六個(gè)面是怎樣定位的，定位會(huì)給圖形帶來變化。我們要這樣理解，一個(gè)立方體就是一個(gè)點(diǎn)，這個(gè)點(diǎn)就是它自身的中心點(diǎn)，按照座標(biāo)來說，我們稱它為原點(diǎn)，也就是說，無論x軸、y軸或z軸，在原點(diǎn)都是0值。這就不難理解了，當(dāng)確定了立方體的邊長之后，立方體表面到原點(diǎn)的垂直距離是其邊長的1/2。說到這里我們就可以得出結(jié)論了。即：立方體表面的定位（表面到原點(diǎn)的垂直距離）=1/2立方體邊長。朋友們都十分清楚，座標(biāo)嘛！有正負(fù)值，我們這里說的是絕對(duì)值。在代碼中，朋友們看到每個(gè)立方體表面都會(huì)有類似 .立方體 .上{ transform: translateY(-150px) rotateX(90deg); 這樣的代碼，其中 translateY(-150px) 就是定位立方體表面的， rotateX(90deg) 是定位立方體表面角度的。
如果我們隨意確定表面到原點(diǎn)的垂直距離呢，那可就成不了立方體了。朋友們?nèi)舾信d趣，也可一試。當(dāng)表面到原點(diǎn)的垂直距離＜1/2立方體邊長時(shí)，表面會(huì)交叉起來，呈“井”字形；當(dāng)表面到原點(diǎn)的垂直距離＞1/2立方體邊長時(shí)，表面會(huì)分離脫開；只有當(dāng)表面到原點(diǎn)的垂直距離=1/2立方體邊長時(shí)，才會(huì)出現(xiàn)真正的立方體。
提醒朋友，如果你想套用此代碼制帖，一定要統(tǒng)一圖片大小，并且其寬高一定是立方體的邊長。
