3D转换

从数学的角度上来说，我们是只有x轴和y轴的，而立体空间上则多了一个z轴，如下

x轴：垂直向右 右为正值，左为负值

y轴：垂直向下 下面为正值，上面为负值

z轴：垂直屏幕  往外为正，往内为负

3D主要用位移，旋转，透视和呈现

　3D位移:

　　  translate3d（x，y，z）

　3D旋转:

　　　rotate3d（x,y,z）

　透视:

　　   perspective

   3D呈现:

　　   transfrom-style

　在css中，这种写法只能跟随一种轴:

　　transform:translateX（100px）;

　　transform:translateY（100px）;

　　transform:translateZ（100px）;

　而它可以简写为：

　　transfrom:translate3d（x,z,y）

　　这个3d是必不可少的，且xyz轴是不能省略的，可以写0值

  3D里面的透视简单理解就是近大远小，值越大，元素越大，但是透视很重要，想实现3d效果，就必须要加透视

  3D旋转

　　使元素沿着xyz三个轴进行旋转

　　语法

　　　　transform:rotateX()

　　　　transform:rotateY()

　　　　transform:rotateZ()　

3D转换

原文：https://www.cnblogs.com/wencaiguagua/p/14333015.html