CSS 中的 3D 转换

我们生活的环境是 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;