变形：
transform：translate（50px,50px）
改变盒子位置，不会影响文档流
transform：rotate（30deg）；旋转
transform：scale (0.5,0.2) 缩放
transform：skew (0,45deg) 斜切
旋转：
transform-style：preserve-3d ;设置3d模式
transform：perspective（800px）人眼可见 rotateY（0deg）旋转角度
默认旋转的角度是z轴
设置中心点
transform-origin：left center； 左中
具体设置数值的定中心：
transform-origin：50px 50px；
实现图片的翻转：
backface-visibility 设置盒子背面是否可见：hidden 隐藏背面不可见 visible 设置背面可见
perspective 设置透视距离 一般设置为800px
transform-style ： preserve-3d 设置盒子按3d空间显示
translateX、translateY、translateZ 设置三维移动
rotateX、rotateY、rotateZ 设置三维旋转
scaleX、scaleY、scaleZ 设置三维缩放
tranform-origin 设置变形的中心点
animation动画：
@keyframes 定义关键帧动画
定义动画速度：
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
animation-delay 动画延迟
animation-duration 动画时间
animation-name 动画名称
animation-iteration-count 动画播放次数 n infinite
animation-play-state 动画状态
running paused
animation-direction
normal 默认动画结束不返回
Alternate 动画结束后返回
animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
可以通过animation设置多个属性 moving 移动 walking 跳动
多帧动画：
@keyframes 定义关键帧动画 通过%的形式分别设置运转状态，从而实现多帧
如：
@keyframes moving{
0%{
transform:translateY(0);
background-color:red;
}
50%{
transform:translateY(400px);
background-color:greenyellow;
border-radius:0;
}
100%{
transform:translateY(0);
background-color:rebeccapurple;
border-radius:50px;
}
}
浏览器样式前缀
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
