相对2D转换来说，3D转换浏览器支持的不太好。不过在移动端可以放心的使用。

3D坐标系：

默认情况水平向右为x轴正方形、垂直向下为y轴正方形、垂直于屏幕向外的为z轴正方形

一. perspective属性

perspective（透视）是transform变形3D中最重要的内容。如果不设置透视，元素的3D变形效果将无法实现，所有的变化都会被投影到2D的区域展示。

​可以简单理解为 视距，用来设置用户和元素 3D 空间Z平面之间的距离。

而其效应由他的值来决定，值越小，用户与 3D 空间 Z 平面距离越近，视觉效果更令人印象深刻；

反之，值越大，用户与3D空间Z平面距离越远，视觉效果就越小。

要把它用在需要变换的元素的父容器中。

二. transform-style

表示他的子元素在变形的时候，是在一个2d平面内变形，还是在一个3d平面内变形。

两个值：flat和preserve-3d

flat：变形仍然在2d空间

preserve-3d：3d空间内变形

也是应用在需要变换父元素上。

三. translate3d(x,y,z)

translate3D(x,y,z) 可以在x,y,z三个方向移动。

translateZ(z) 只在z轴平移

四. rotate3d(x, y, z, a)

• 3d旋转。 参数中的x，y，z是一个数值。a是一个角度。
• 如果a是正值表示顺时针旋转， 如果a是负值表示逆时针旋转。
• x,y,z表示方向矢量，xyz的平方和如果是1的话就是标准矢量，如果不是1就会转换成一个标准矢量。x,y,z分别分别除以他们的平方和得到的值就是标准矢量。 这三个值决定了将来要旋转的时候的坐标轴。

注意：判断是顺时针还是逆时针，让逆着坐标轴的方向观察的。

可以使用rotateX、rotateY、rotateZ表示沿着某个轴的旋转

五. scale3d(sx, sy, sz)

• 参数分别表示沿着向相应的坐标轴的缩放。注意sz其实是缩放的translateZ的值，如果没有设置translateZ则sz的值无效的。

• scaleX、scaleY、scaleZ分别表示x，y，z方向的缩放。

正方体的案例