3D变换
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。
这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z 轴的正方
向。
CSS 的 中的 3D 坐标系
CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的，相当于其绕着 X
轴旋转了 180 度
transform
旋转rotate
单位deg
X轴旋转 rotateX()
Y轴旋转 rotateY()
Z轴旋转 rotateZ()
注意：在沿某轴进行旋转的时候，会改变其他两个轴的方向。
位移translate
X轴位移 translateX()
Y轴位移 translateY()
Z轴位移 translateZ()
扭曲skew
单位deg
skew()
X轴方向倾斜 skewX()
Y轴方向倾斜 skewY()
缩放scale
scale()
X轴方向放大/缩小 scaleX()
Y轴方向放大/缩小 scaleY()
Z轴方向放大/缩小 scaleZ()
透视perspective
在CSS3中有一个属性能让我们以透视的方式去观察元素，perspective是用在透视元素的父元素上，也就是说一个元素具有perspective属性，其子元素就会获得透视效果
没有透视效果的子元素
具有透视效果的子元素
在父元素的基础上加了perspective
3D呈现transform-style
transform-style属性是3D空间中一个重要的属性，指定嵌套元素如何在3D空间中呈现!
transform-style：flat|preserve-3d；
flat值为默认值，表示所有子元素在2D平面呈现。
preserve-3d表示所有子元素在3D空间中呈现。
注意：transform-style属性需要设置在父元素中。
拓展：backface-visibility
设置元素背面是否可见
动画animation
animation：动画名称 动画执行一次的时间 速度 动画是否永远执行 动画延迟时间 动画执行的顺序 动画执行的次数
动画属性
animation-name
设置动画序列名称
animation-duration
属性定义动画是从何时开始播放，及动画应用在元素开始的这段时间的长度。默认值0s，表示动画在该元素上后立即开始执行。该值以秒（s）或者毫秒（ms）为单位。
animation-delay
动画延时时间
animation-timing-function
动画执行速度
配置参数值
ease，ease-in，ease-out，ease-in-out，linear
animation-play-state
定义动画播放状态
running 动画正常播放
paused 动画暂停播放
animation-direction
表示动画是否反向播放
normal 正序播放
reverse 倒序播放
alternate 交替播放
alternate-reverse 反向交替播放
animation-fill-mode
指给定动画播放前后应用元素的样式
none 动画执行前后不改变任何样式
forwards 保持目标动画最后一帧的样式
backwards 保持目标动画第一帧的样式
both 动画将会执行forwards和backwards执行的动作
animation-iteration-count
定义动画播放次数。
steps(60)
表示动画分成 60 步完成参数值的顺序：
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
必要元素：
a、通过@keyframes 指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过 animation 将动画应用于相应元素；
动画的序列化/动画的实现
@keyframes 动画名称{
动画的分隔符from{} to{}
百分比形式分割动画：每个节点可定义不同属性。
}