一个属于平面，一个属于立体，2D是X，Y轴对其进行操作，而3D的话多了一个Y轴 他们的操作方法主要有以下几种： 1.平移 translate(x,y) 2.旋转 rotate（角度） 3.缩放 scale（宽度x，高度y） 4.倾斜 skew（x轴的角度，y轴角度) 对于3D来说，就是多了个z轴，基本的方法都差不多。
1.@keyframes：创建动画 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst{ from{background:red} to{background:yellow} } @-webkit-keyframes myfirst{ /* Safari and Chrome*/ from{background:red} to{background:yellow} }2.绑定动画 @keyframe是创建动画，我们需要把创建好的动画，通过animation属性绑定到一个选择器，否则动画不会有任何效果。
格式：animation:动画名 动画时长； div{ animation:myfirst 5s; }3.@keyframes 规则和所有动画属性 @keyframes 规定动画 animation 所有动画属性的简写属性，除 animation-play-state animation-name @keyframes 动画名称 animation-duration 动画完成一个周期所花秒或毫秒数。默认是 0 animation-timing-function 动画的速度曲线。默认是 “ease” animation-delay 动画延迟多久开始。默认是 0 animation-iteration-count 规定动画被播放的次数。默认是 1 animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal” animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
