css3d动画：平移、旋转、缩放

1、前言：

3d比2d多了一个z轴，这个z轴是垂直我们屏幕的方向，指向我们人眼的是正轴，远离人眼的是负轴，图示如下： 

 2、景深设置和3d平移

当我们在z轴上向正轴方向上移动物体，也就是向我们眼前移动物体，结果不会发现这个物体变大，因为近大远小，所以应该向我们眼睛方向靠近时，它应该会变大，但是没有，原因是其实在没有设置景深时，我们眼睛距离这个物体是非常远的，所以它往前移动我们眼睛是感知不到它的变化的，我们眼睛和屏幕之间的距离就称为“景深”。我们需要去设置景深才可以观察到。

✍设置景深的属性：两种办法

（1）perspective：1200px；（在父元素中使用）

（2）transform：perspective（1200px）；（在子元素中使用）

代码：