1、变换transform
能够对元素进行旋转（rotate）、缩放（scale）、倾斜（skew）、移动（translate）四种类型处理。
属性：
transform 向元素应用2D或3D变换
transform-origin 改变被变换元素的原点位置
transform-style 被嵌套元素如何在3D空间中显示
perspective 3D元素的透视效果
perspective-origin 3D元素的底部位置
backface-visibility 元素在不面对屏幕时是否可见
transform坐标系统：
如果没有使用transform改变元素原点位置，css3旋转、缩放、倾斜、移动都是以元素中心位置进行的。
transform
语法：transform:none|transform-functions;
2D变换方法:
matrix(n,n,n,n,n,n) 以一个含六个值的变换矩阵形式指定2D变换
translate(x,y) 2D移动，第一个参数对应x轴，第二个参数对应y轴。如果第二个值未设置，默认0
translateX（n） 元素x轴移动
translateY（n） 元素y轴移动
rotate(angle) 2D旋转，需要先设置transform-origin属性
scale(x,y) 2D缩放，如果第二个值未设置，默认取第一个参数的值
scaleX(n) 元素x轴的（水平方向）缩放
scaleY(n) 元素y轴的缩放
skew（x-deg,y-deg） 2D倾斜，如果第二个值未设置，默认0
skewX(angle) 元素x轴的倾斜
skewY(angle) 元素y轴的倾斜
3D变换方法：
matrix3d（n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n） 以一个4*4矩阵的形式指定一个3D变换
translate3d（x,y,z） 3D移动，参数不允许省略
translateX(n)/translateY(n)/translateZ(n) 元素在x/y/z轴上移动
scale3d(x,y,z) 3D缩放。参数不允许省略
scalaeX(n)/scaleY(n)/scaleZ(n) 元素在x/y/z轴上缩放
rotate(x,y,z,deg) 3D旋转，前三个参数分别表示旋转方向，第四个参数表示旋转角度，参数不允许省略
perspective(n) 透视距离
transform-origin属性：
设置元素以某个原点进行转换，属性值可以使用关键字、长度和百分比。
x-axis 定义视图被置于x轴的何处left、center、right | length | %
y-axis 定义视图被置于y轴的何处left、center、right | length | %
z-axis 定义视图被置于z轴的何处length
transform-style属性：
指定某元素的子元素是位于三维空间内，还是在该元素所在的平面内被扁平化。
语法：transform-style:flat（默认） | preserve-3d
属性值为preserve-3d时，元素将会创建局部堆叠上下文，保证变换元素处于三维空间内，需要在变换元素的父元素上定义transform-style属性。所有的子元素都处于同一个三维空间内。
2、过渡
css3过渡是元素从一种样式逐渐改变为另一种样式时的效果。
属性：
transition 在一个属性中设置四个过渡属性
transition-property 规定应用过渡的css属性名称
transition-duration 规定过渡效果持续时间，默认0
transition-timing-function 规定过渡效果时间曲线，默认case
transition-delay 规定过渡效果何时开始，默认0
transition-property属性
none（没有属性会获得过渡效果）all（所有属性都将获得过渡效果）ident（指定要进行过渡的css属性列表，列表以逗号分隔）
transition-duration属性
变换持续的时间，规定完成过渡效果需要花费的时间（秒或毫秒），默认0。
transition-timing-function属性
- ease 默认值，逐渐变慢，ease函数等同于贝塞尔曲线（0.25,0,.1,0.25,1.0）
- linear 匀速，（0.0,0.0,1.0,1.0）
- ease-in 加速（0.42,.0,1.0,1.0）
- ease-out 减速(0,0,0.58,1.0)
- ease-in-out 加速然后减速（0.42,0,0.58,1.0）
- cubic-bezier 允许自定义一个时间曲线,（x1,y1,x2,y2）四个值特定于曲线上点P1和P2。所有值需要在[0,1]区域内，否则无效。
transition-delay属性
用来指定一个动画开始执行的时间，就是说改变元素属性值后多少秒或者毫秒。
3、动画
属性：
@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
animation-fill-mode 规定对象动画时间之外的状态
@keyframes规则
语法：@keyframes animationname {keyframes-selector{css-styles;}}
animationname 必需，定义动画的名称
keyframes-selector 必需，关键帧。合法值：0~100%、form(与0%相同)、to（与100%相同）
css-styles 必需。关键帧时一个或多个合法的css样式属性
animation-delay属性
定义动画何时开始，秒或者毫秒
animation-iteration-count属性
定义动画的播放次数 ，默认值1，关键字infinite规定动画无限次播放
animation-direction属性
定义是否可以轮流反向播放动画，默认值normal，动画正常播放。alternate奇数次正常播放，偶数次反向播放