3D变换
3D变换相较2D变换，坐标系中多了 Z 轴，也就意味着物体除了上下左右，还可以前后移动。
rotateX/Y/Z 沿X/Y/Z轴旋转
translateX/Y/Z 沿X/Y/Z轴移动
rotate() 在2D中的旋转方式，在3D中与 rotateZ 相当。那么，单纯地将 transform 中的参数扩展出 Z 维度，就能实现 3D 效果了吗？
1. 透视
什么是 perspective ？词典中翻译为观点、远景、透视图。这是一个非常抽象的概念，需要一点空间想象力。
先来看看， 加了perspective 和 没有加是什么区别， 第一个小方块，是有加的效果，能明显的看到空间感了有没有， 感觉他是真的像在旋转， 而第二个呢，像是在伸缩。
透视会产生近大远小的效果
perspective-origin 改变透视的位置, 默认是正中间
perspective有两种写法
a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素
b) 作为 transform 属性的一个值，作用于元素自身,子元素的3D效果可呈现
给父元素添加属性perspective : 800px
在给父元素加perspective属性的时候，会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。
分别给子元素添加transform: perspective(800px)
在分别给子元素加transform：perspective属性的时候，会以元素自身的某个点作为视点，所以呈现出的效果还是一样的。
2. 建立三维空间体系
transform-style: preserve-3d 的属性设置，默认值为 flat。这个属性的设置旨在告诉子元素需要遵循怎样的空间体系规则。这个属性不能继承，因此只要有子元素需要设置空间体系规则，就得在父元素声明这个属性。
backface-visibility：visible/ hidden 设置元素背面是否可见
3. 案例
结合透视和3D转换画一个立方体:
- 步骤 1 - 准备立方体的 HTML 代码
- 步骤 2 - 利用 CSS(3) 将 6 个面组装成立体形状的立方体
- 步骤 3 - 让立方体显得更立体点
为了让立方体默认看起来更立体点（不是单纯地正面对着我们），可以利用 `rotate` 将立方体在 X 和 Y 轴上各旋转 `25deg`，让它正面斜对着我们。- 步骤 4 - 设置立方体的
transition属性
最后一步就是给立方体添加 `transition` 属性，让它的状态变换拥有过渡动画效果- 步骤 5 - 在立方体的父级元素上设置透视距离：
perspective: 1000px，在立方体上设置变形方式：transform-style: preserve-3d
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
border: 1px dashed red;
transform-style: preserve-3d;
transition: all 2s linear;
transform: rotateX(25deg) rotateY(25deg);
}
.box div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.font{
transform: translateZ(100px);
background-color: blue;
}
.behand{
transform: translateZ(-100px);
background-color: pink;
}
.left{
transform: translateX(-100px) rotateY(90deg);
background-color: red;
}
.right{
transform: translateX(100px) rotateY(90deg);
background-color: brown;
}
.top{
transform: translateY(-100px) rotateX(90deg);
background-color: yellow;
}
.bottom {
transform: translateY(100px) rotateX(90deg);
background-color: purple;
}
.box:hover{
transform: rotateX(360deg) rotateY(360deg);
}
</style>
<body>
<div class="box">
<div class="font"></div>
<div class="behand"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>4. 终端支持
由于截至目前为止，CSS3 的 3D 功能还止于炫技的阶段，安卓机与 iOS 的支持效果存在差异且难以调和，不建议在生产项目中大面积使用 3D 深层功能。
坊间流传这这样一个传说：一旦使用 3D 属性，就能触发设备的硬件加速，从而使得浏览器的表现更佳。
