css3动画(3D)

上一篇我讲完了动画里面的2D动画，今天我来给大家讲一下3D动画。

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中具有颠覆性的特征
4.animation(a,b,c,d,e,f)
可以通过设置的多个节点，来精确的控制一个或一组动画，可以实现复杂的动画。
a(动画的名字)
b(动画持续的时间)
c(动画运动曲线)
d(动画何时开始)
e(动画播放次数)
f(是否反向(逆向播放))
@keyframes 动画的名字{ 0%{开始}...... 100%{结束} }
在中间我们可以写很多动画但是要有一定的逻辑性，否则会产生"鬼畜"

那我们整一个小汽车的案例吧。



到这儿我们就将css3动画(3D)全部讲完了，当然我将的都是一些基础动画，但是复杂的动画都是在这个基础上完成的，所以当大家懂了之后，就可以自己尝试的开始写一些好的动画了，希望大家有所收获。