我们生活的环境是 3D 的，特点是近大远小，在物体后面的东西会被遮挡。我们可以用 CSS3 做出 3D 的视觉效果。
1、3D 移动 —— translate3d
之前我们学到的移动是二维的（2D 转换 transform —— 元素的位移、旋转、缩放），3D 移动是在此基础上多了一个移动的方向，也就是 Z 轴。
/* 在 Z 轴向外移动 100px（向我们眼睛的方向） */
transform: translateZ(100px);
/* 分别在 X、Y、Z 轴上移动 100px、50px、100px */
transform: translate3d(100px, 50px, 100px);需要注意的是，在 X、Y 轴的移动距离可以用像素，也可以用百分比，但 Z 轴移动的距离通常用像素值。
2、透视 —— perspective
我们发现上面的样式虽然用了 translate3d，但依旧是二维效果的。
如果想要产生 3D 效果，需要透视。也就是模拟人视觉的位置去看。
透视也称为视距，视距就是人眼睛到屏幕的距离，距离越近，成像越大，距离越远，成像越小。
透视写在被观察元素的父盒子上面。
perspective: 300px;
这下盒子移动后看着变大了，因为我们在 Z 轴方向向我们移动了 100px，近大远小。
尝试将盒子移远一点，会看到盒子变小了：
/* 在 Z 轴向内移动 100px（往屏幕内方向移动） */
transform: translate3d(100px, 50px, -100px);
3、3D 旋转 —— rotate3d
3D 旋转可以让元素在三维平面内沿着 x轴、y轴、z轴或者自定义轴进行旋转。
关于元素旋转方向，可以记住左手准则：
左手的大拇指指向 x / y / z 的正方向，其余手指弯曲的方向就是该元素旋转的方向（正值）。
/* 沿着 x 轴正方向旋转 45 度 */
transform: rotateX(45deg);
/* 沿着 y 轴正方向旋转 45 度 */
transform: rotateY(45deg);
/* 沿着 z 轴正方向旋转 45 度（其实就是之前的 rotate） */
transform: rotateZ(45deg);
/* 沿着自定义轴旋转，x、y、z 表示旋转轴的矢量，表示是否希望沿着该轴旋转 */
transform: rotate3d(x, y, z, deg);
/* 沿着 x 轴旋转 45 度 */
transform: rotate3d(1, 0, 0, 45deg);
/* 沿着 x、y 轴的对角线旋转 45度 */
transform: rotate3d(1, 1, 0, 45deg);4、3D 呈现 —— transform-style
transform-style 控制子元素是否开启三维立体环境，需要写给父级的盒子，子级盒子才能呈现 3D 效果。
/* 子元素不开启 3d 立体空间，默认值 */
transform-style: flat;
/* 子元素开启立体空间 */
transform-style: preserve-3d;