咱们生存的环境是 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;