【知了堂学员笔记】3D动画立方体实现
对于CSS3新增的属性，我们觉得最炫酷的应该最属于3D变换和2D变换以及动画了吧！
下面我将自己对transform中rotate、translate的理解和大家分享一下！
3D坐标演示
坐标
值得注意的是：这个坐标系和我们平时理解的不一样，这里的y轴向上方向是负的
而我们的z轴的方向其实就是我们面向浏览器的方向。假如我们的视角在红色的正前方，那么从红色一层到紫色一层往里面看的方向就是z轴的方向。
stacking level
语法解释
transform:rotateX(40deg);
//这句话解释该元素绕X轴顺时针旋转40度
tranform:rotateY(40deg);
//该元素绕y轴顺时针旋转40度
transform:rotateZ(-40deg);
//该元素绕z轴逆时针旋转40度
transform:translateX(50px);
//该元素朝x轴的正方向（右）移动50像素
transfrom:translateY(-50px);
//该元素朝y轴的负方向（上）移动50像素
transform:translateZ(50px);
//该元素朝z轴的正方向（朝向我们）移动50像素
transform:translateZ(-50px);
//该元素朝z轴负方向（往屏幕里面）移动50像素
下图是以上代码的实例图:
示例图
这里运用到了perspective这个属性，他的中文翻译是“透视”的意思。
透视
透视
语法是：perspective:numbernumber越大，（我们的视角离图像越远）也就是眼睛看图像的距离越远。
这个属性可以 设置在需要定义透视的元素上 也可以 设置在它的父元素上。
学过素描或者建筑的同学比较好理解。
举个栗子：也就是我们看远方的山，我们站的远处的时候会觉得这个山很小很矮，但是当但我们站在山下的时候，我们又会觉得这座山很大很高，其实他的大小并没有改变。用一句成语来说就是“一叶障目不见泰山”。
同样的，perspective-origin只有在设置了perspective属性后才能够有作用
perspective-origin的中文意思是“视角原点”，默认的是3D元素的中心。
语法是：perspective-origin: x y; 这里x，y是距离x轴和y轴的距离。
制作3D立方体
3D
第一步：书写html结构
<div class="wrap">
<div class="box">
<div class="cube cube-1">前</div>
</div>
<div class="box">
<div class="cube cube-2">后</div>
</div>
<div class="box">
<div class="cube cube-3">左</div>
</div>
<div class="box">
<div class="cube cube-4">右</div>
</div>
<div class="box">
<div class="cube cube-5">上</div>
</div>
<div class="box">
<div class="cube cube-6">下</div>
</div>
</div>
第二步：为html结构增加样式
div{box-sizing:border-box;}
//为整个盒子设置3d视角，也就是我们看到的是一个3d的图像，而不是2d的
.wrap{
position: relative;
transform-style: preserve-3d;
}
//参考盒子，也就是cube最原始的位置
.box{
position: relative;
width: 200px;
height: 200px;
border:1px dotted #178eee;
margin: 100px;
float: left;
}
.cube{
position: absolute;
font-size: 40px;
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
background-color: #178eee;
opacity: 0.6;
}
为每个面设置样式
我们可以分别对六个面进一 一设置
为了区分面，我们为每个面设置一个颜色！
对第一个面设置位置及角度（cube-1）前
.cube-1{
background-color: coral;
transfrom: perspective(1200px) translateZ(100px);
}
对第二个面设置位置及角度（cube-2）后
.cube-2{
background-color: #ee33cc;
transform:perspective(1200px) translateZ(-100px);
}
对第三个面设置位置及角度（cube-3）左
.cube-3{
background-color: #33aadd;
transform:perspective(1200px) rotateY(-90deg) translateZ(100px);
}
对第四个面设置位置及角度（cube-4）右
.cube-4{
background-color: #aadd44;
transform:perspective(1200px) rotateY(90deg) translateZ(100px);
}
对第五个面设置位置及角度（cube-5）上
.cube-5{
background-color: #ee172c;
transform:perspective(1200px) rotateX(90deg) translateZ(100px);
}
对第六个面设置位置及角度（cube-6）上
.cube-6{
background-color:#178eee;
transform:perspective(1200px) rotateX(-90deg) translateZ(100px);
}
最后将box盒子上的position:relative改成absolute，把所有3D元素上的perspective:(1200px)定义到父元素wrap上就可以实现立方体效果了。
注意！！！如果需要对一个元素进行连续的转换（transform），那么就设置在一个transform上，如果你同一元素上设置第二个transform属性，那么后面的就会覆盖掉前一个。
这里将视角定义在每个具体的元素上，是因为我们在目前操作旋转的时候看到的是每个具体的元素，而不是看整体。最后我们将视角定义在父元素上，看到的就是整体的效果。
我们试一下将perspective:1200px设置在该元素的父元素上的效果是什么？
下图是定义在父元素的perspective属性：定义一个视角，我们看到的就是整体，同一视角看过去本身是同样大小同一个方向的元素，就会有偏差。
one
下面是每一个元素都有自己的一个视角，那么不管从哪个角度看过去，他都是那个样子。
two
做一个动画效果！
@keyframes show{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-100px);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(-100px);
}
}
.wrap{
animation: show 6s infinite;
}
把动画引入到整个立方体上，我们的有动画的3D立方体就完成了！
立方体
最终实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D立方体</title>
<style>
div{box-sizing: border-box;}
.wrap{
position: relative;
transform-style: preserve-3d;
margin: 400px;
animation: show 6s infinite;
perspective:(1200px);
}
.box{
position: absolute;
width: 200px;
height: 200px;
}
.cube{
position: absolute;
font-size: 40px;
text-align: center;
line-height: 200px;
width: 100%;
height: 100%;
background-color: #178eee;
opacity: 0.6;
}
.cube-1{
background-color: coral;
transform:translateZ(100px);
}
.cube-2{
background-color: #ee33cc;
transform:translateZ(-100px);
}
.cube-3{
background-color: #33aadd;
transform: rotateY(-90deg) translateZ(100px);
}
.cube-4{
background-color: #aadd44;
transform: rotateY(90deg) translateZ(100px);
}
.cube-5{
background-color: #ee172c;
transform:rotateX(90deg) translateZ(100px);
}
.cube-6{
transform:rotateX(-90deg) translateZ(100px);
}
@keyframes show{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-100px);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(-100px);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="cube cube-1">前</div>
</div>
<div class="box">
<div class="cube cube-2">后</div>
</div>
<div class="box">
<div class="cube cube-3">左</div>
</div>
<div class="box">
<div class="cube cube-4">右</div>
</div>
<div class="box">
<div class="cube cube-5">上</div>
</div>
<div class="box">
<div class="cube cube-6">下</div>
</div>
</div>
</body>
</html>
有兴趣的小伙伴们，可以将它复制到自己的html文档中，看看效果哦！
或者关注我们一起交流：
知了堂学习社区
