问题描述
一个3D立体图形在网页中呈现旋转效果，看起来十分炫酷，这个过程的实现其实并不困难，只需要利用CSS3动画效果，并对属性设置合适的参数之后，效果就能实现了。
在解决问题之前，需要先了解CSS3的动画效果是什么，其相关属性和参数有什么含义，这个过程就请查看CSS3动画的官方文档。CSS3制作动画有三个属性：变形(transform)、转换(transition)和动画(animation)，本文将通过具体讲解几个属性的使用来对动画效果案例进行分析。
效果图：
图 2.1 立体旋转效果图
解决方案
1 HTML
html中只需要创建一个外部的div，来作为包裹一个立方体六面的容器，然后再在每一个div中插入图片。
<div>
<div>
<img src="img/1.jpg">
</div>
<div>
<img src="img/2.jpg">
</div>
<div>
<img src="img/3.jpg">
</div>
<div>
<img src="img/4.jpg">
</div>
<div>
<img src="img/5.jpg">
</div>
<div>
<img src="img/6.jpg">
</div>
</div>
2 CSS3
首先，要让六张图片在视觉上呈现立体效果，需要利用CSS3的perspective属性，它用来定义 3D 元素距视图的距离。
对于外部容器，使用transform-style属性，设置为preserve-3d达到3D效果。对 animation属性设置rotate值来实现2D的旋转。动画完成需要的总时长为20s，infinite表示循环无限次，linear设置动画从头到尾的速度是相同的。
通过opacity设置透明度，以及让元素绝对定位。
html {
perspective: 800px;
}
.cube div {
width: 200px;
height: 200px;
/* 为元素设置透明效果 */
opacity: 0.7;
position: absolute;
}
.cube {
width: 200px;
height: 200px;
margin: 100px auto;
/* 设置3d变形效果 */
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
}
在CSS中，创建动画还需要了解@keyframes 规则，from里面放的是动画开始（0%）的样式，to里面放的是动画结束（100%）的样式。
@keyframes rotate {
form{
transform:rotateX(0) rotateZ(0)
}
to{
transform:rotateX(1turn) rotateZ(1turn)
}
}
针对每个盒子以及里面的图片的设置：rotateY(90deg),是指按Y轴顺时针旋转90度；translateZ(100px)，是指向Z轴方向平移100px。
img {
vertical-align: top;
}
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
.box2 {
transform: rotateY(-90deg) translateZ(100px);
}
.box3 {
transform: rotateX(90deg) translateZ(100px);
}
.box4 {
transform: rotateX(-90deg) translateZ(100px);
}
.box5 {
transform:rotateY(180deg) translateZ(100px);
}
.box6 {
transform: rotateY(0deg) translateZ(100px);
}
结语
在创建动画的时候，要注意每个属性值的设置，有共同点也有差异，旋转方向和旋转角度的设置要通过实际呈现效果来改进。同时，还要注意区分：不同属性之间的搭配使用。
END主 编 | 王楠岚
责 编 | wrape
能力越强，责任越大。实事求是，严谨细致。
——where2go 团队
微信号：算法与编程之美
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
