聊代码（第八十集）css样式（之五十） 下面，是个封闭式《旋转立方体菊花图》，其立方体内嵌有“中秋快乐”动图，后衬渐变背景，请欣赏。
代码：
＜style type="text/css"＞*{
margin:0 auto;
}
@keyframes 转{
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; /*相对定位*/
transform-style:preserve-3d; /* 默认flat 2D */
transform:rotateX(-30deg) rotateY(-70deg); animation:rotate 25s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.立方体 div{
width:100%;
height:100%;
border:2px solid #f00; /*立方体的边框线颜色*/
position:absolute; /*绝对定位*/
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);/*立方体内图片定位*/ }
＜/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＞
代码解析：
立方体有六个面，六个面是以不同的角度，不同的位置构成立方体的。因为这个，我们不得不讨论一下它的六个面是怎样定位的，定位会给图形带来变化。我们要这样理解，一个立方体就是一个点，这个点就是它自身的中心点，按照座标来说，我们称它为原点，也就是说，无论x轴、y轴或z轴，在原点都是0值。这就不难理解了，当确定了立方体的边长之后，立方体表面到原点的垂直距离是其边长的1/2。说到这里我们就可以得出结论了。即：立方体表面的定位（表面到原点的垂直距离）=1/2立方体边长。朋友们都十分清楚，座标嘛！有正负值，我们这里说的是绝对值。在代码中，朋友们看到每个立方体表面都会有类似 .立方体 .上{ transform: translateY(-150px) rotateX(90deg); 这样的代码，其中 translateY(-150px) 就是定位立方体表面的， rotateX(90deg) 是定位立方体表面角度的。
如果我们随意确定表面到原点的垂直距离呢，那可就成不了立方体了。朋友们若感兴趣，也可一试。当表面到原点的垂直距离＜1/2立方体边长时，表面会交叉起来，呈“井”字形；当表面到原点的垂直距离＞1/2立方体边长时，表面会分离脱开；只有当表面到原点的垂直距离=1/2立方体边长时，才会出现真正的立方体。
提醒朋友，如果你想套用此代码制帖，一定要统一图片大小，并且其宽高一定是立方体的边长。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
