css3d动画：平移、旋转、缩放
1、前言：
3d比2d多了一个z轴，这个z轴是垂直我们屏幕的方向，指向我们人眼的是正轴，远离人眼的是负轴，图示如下：
2、景深设置和3d平移
当我们在z轴上向正轴方向上移动物体，也就是向我们眼前移动物体，结果不会发现这个物体变大，因为近大远小，所以应该向我们眼睛方向靠近时，它应该会变大，但是没有，原因是其实在没有设置景深时，我们眼睛距离这个物体是非常远的，所以它往前移动我们眼睛是感知不到它的变化的，我们眼睛和屏幕之间的距离就称为“景深”。我们需要去设置景深才可以观察到。
✍设置景深的属性：两种办法
（1）perspective：1200px；（在父元素中使用）
（2）transform：perspective（1200px）；（在子元素中使用）
代码：
要在z轴上设置平移属性，一定要设置景深才能看得出变化，而且要创建3d舞台。。。
✍3d复合写法：上面那个在z轴上位移的代码也可以写成：3d这种形式
3、3d旋转
✍属性介绍：3d旋转和2d旋转差不多，旋转默认都是绕着自己中心旋转
transform：rotateX（度数）；就是绕着x轴（水平轴）前后旋转；
transform：rotateY（度数）；就是绕着y轴（竖轴）左右旋转；
transform：rotateZ（度数）；就是绕着z轴（眼前的轴）转，也就是在眼前的平面转；
旋转图示：
✍绕Z轴旋转实例：
代码：
30°旋转结果：
50°旋转结果：
✍ 3d属性复合写法：
前面三个值是最后一个值的倍数，，，表示绕x轴旋转多少度，绕y轴旋转多少度，绕z轴旋转多少度
4、3d缩放
缩放属性和2d一样，见2d链接：2d平移、缩放、旋转、倾斜、多属性值_陌一一的博客-CSDN博客
说一下z轴的缩放，单独z轴缩放是看不见效果的，因为它是在我们眼前前后缩放，要配合其他属性来看才可以，例如配合景深和旋转等属性，，