关于前端: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;