CSS3中3D转换实现立方体效果
CSS3中3D转换实现立方体效果
点击查看演示
一、案例分析
1、最外层div容器.rect-wrap的作用：舞台元素，设置perspective，让其子元素获得透视效果。
2、.container这个div容器，设置transform-style:preserve-3d，让其子元素在3D空间呈现。
3、在.container这个div容器里，需要添加立方体的六个面，分别是.top顶面，.bottom底面，.left左面，.right右面，.front前面，.back后面。
4、我们还想要这个立方体自己动起来，我定义了一个动画myrotate。最后把这个动画用到这个立方体的.container容器元素上。
二、HTML源代码
<!-- 舞台元素，设置perspective，让其子元素获得透视效果 --> <div class="rect-wrap"> <!-- 容器，设置transform-style:preserve-3d，让其子元素在3D空间呈现 --> <div class="container"> <!-- 立方体的六个面 --> <div class="top slide"></div> <div class="bottom slide"></div> <div class="left slide"></div> <div class="right slide"></div> <div class="front slide"></div> <div class="back slide"></div> </div> </div>
三、CSS源代码
<style>
*{
margin: 0;
padding: 0;
}
.rect-wrap{
position: relative;
perspective: 1600px;
}
.container{
width: 800px;
height: 800px;
margin: 0 auto;
transform-style: preserve-3d;
/* 设置3D空间的原点在平面中心再向z轴移动200px的位置 */
transform-origin: 50% 50% 200px;
animation: myrotate 30s linear infinite;
}
/* 立方体的每个面 */
.slide{
width: 400px;
height: 400px;
position: absolute;
}
/* 立方体的顶面 */
.top{
background-color: rgba(255,0,0,0.6);
left: 200px;
top: -200px;
transform: rotateX(-90deg);
transform-origin: bottom;
}
/* 立方体的底面 */
.bottom{
background-color: rgba(0,255,0,0.6);
left: 200px;
bottom: -200px;
transform: rotateX(90deg);
transform-origin: top;
}
/* 立方体的左面 */
.left{
background-color: rgba(156,156,255,0.6);
left: -200px;
top: 200px;
transform: rotateY(90deg);
transform-origin: right;
}
/* 立方体的右面 */
.right{
background-color: rgba(200,100,160,0.6);
left: 600px;
top: 200px;
transform: rotateY(-90deg);
transform-origin: left;
}
/* 立方体的前面 */
.front{
background-color: rgba(0,0,255,0.6);
left: 200px;
top: 200px;
/* 立方体的前面对着屏幕，所以不用旋转，只需向z轴前移动距离 */
transform: translateZ(400px);
}
/* 立方体的后面 */
.back{
background-color: rgba(0,255,0,0.6);
left: 200px;
top:200px;
/* 立方体后面正对着屏幕，所以不用旋转，只需向z轴后移动距离*/
transform: translateZ(0);
}
@keyframes myrotate {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
10%{
transform: rotateX(0deg) rotateY(180deg);
}
20%{
transform: rotateX(-180deg) rotateY(180deg);
}
30%{
transform: rotateX(-360deg) rotateY(180deg);
}
40%{
transform: rotateX(-360deg) rotateY(360deg);
}
50%{
transform: rotateX(-180deg) rotateY(360deg);
}
60%{
transform: rotateX(90deg) rotateY(180deg);
}
70%{
transform: rotateX(0) rotateY(180deg);
}
80%{
transform: rotateX(90deg) rotateY(90deg);
}
90%{
transform: rotateX(90deg) rotateX(0);
}
100%{
transform: rotateX(0) rotate(0);
}
}
</style>transform顾名思义：变换。就可以想到它可以做很多很多的事情了，这个属性有很多的值，在这里简单列举一下：
(1)、translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离。
(2)、scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：定义元素的缩放比例。
(3)、rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。
(4)、skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：定义元素的倾斜角度。
3D效果的认知：
我们可以看到这是一个三维的空间图，不要被第一眼的复杂感吓到，仔细分解一下其实还是很清晰的：反正就X轴、Y轴、Z轴三个方向。
想象一下，假如你现在坐在电脑面前，电脑屏幕中心是原点，原点往右就是X轴正方向，往下就是Y轴正方向，往屏幕前方（也就是往人脸）的方向就是Z轴的正方向了。把坐标轴的方向搞清楚了，上面的方法就能正确的使用了。
如果你觉得上面的解释仍然太过于枯燥抽象，那就来举个生活中的例子来对应一下三个rotate属性（rotateX、rotateY、rotateZ）：
体操表演－绕着X轴旋转就是rotateX（单杠就是X轴）
钢管舞表演－绕着Y轴旋转就是rotateY（钢管就是Y轴）
转盘旋转－绕着Z轴在旋转就是rotateZ（想象有一根绳子从转盘的中心穿过）
perspective属性
perspective的中文意思是：透视，视角！该属性用来激活一个3D空间。
当为元素定义perspective属性时，其子元素都会获得透视效果（使用了3D变换的元素）。所以一般来说perspective属性都应用在父元素上，我们可以把这个父元素称为舞台元素。
只看解释可能还是难以理解，我们还是用实例说话吧：
<center>
还没有留言，还不快点抢沙发？