css3 动画的使用过程

3D动画又叫做3D变形
2D动画只有x，y轴
3D动画多了个z轴，让元素变得立体起来
3D动画跟以前我们学习物理时3D坐标系有点相识但是并不是一样的，毕竟现在我们要做的是动画，电脑里面的.

x轴左边是负，右边是正
y轴上边是负，下边是正
z轴里面是负，外面是正

1.rotateX()
沿着x轴立体旋转
rotateY()
沿着y轴立体旋转
rotateZ()
沿着z轴立体旋转
rotate3d(x,y,z,角度(deg))
前三个参数取值范围是0到1，后面的角度也是必须带单位的，但是即使大家把它写入里面也无法运行(请往下看)
看着前两个属性，大家是不是有点熟悉，对这跟2D动画里面的旋转是一样的，但是还有一个就是z轴的旋转，这也是最主要的。

2.perspective(透视)
我们一般看到的电脑屏幕都是2D平面，但是当我们使用perspective后，我们就可以看到3D的视觉效果。
其原理就是:把近大远小的所有图像，透视在屏幕上。
我们主要将其设置在父元素里面，使它所有的子元素都能适用。
如果让我详细讲解透视具体的原理，我也答不出来，这是一种视觉效果，我给大家在网上整理个图给大家看吧，自行体会。

3.translateX（x）
水平方向移动(与2d效果一样)可以为百分比
translateY（y）
垂直方向移动(与2d效果一样)可以为百分比
translateZ(z)
单独移动的情况下，我们是看不出效果的，因为电脑的z轴嘛，大家应该知道，无论怎么移动都不会有变化
translate3d(x，y，z)

backface-visibility
CSS3涉及到3d变换关键属性：
1. perspective属性，该属性表示视点，该属性调整我们视点的远近。
2. rotate(degree)，旋转分别绕x,y,z轴进行degree度旋转。
3. transform-style可以设置元素所处的是3d空间还是平面。Flat表示平面。
4. translateZ 绕z轴平移，调整平面向自己所面向的方向移动的距离。如果取值为负值，表示平面向背向的方向移动一定距离。