一、3D
开启元素3D
transform-style: preserve-3d;
Z轴 正数 屏幕外，反之屏幕内
近大远小
perspective: length (必须大于等于0) -- 在3D元素中设置，所有子元素统一生效。
transform: perspective(200px) -- 给3D元素的子元素单独设置景深
景深中心点：设置“观察者”位置。
perspective-origin: x y
背面是否可见
backface-visibility:
- hidden: 元素背面朝向观察者不可见。
在火狐中，必须配合
transform: translateZ(0);
二、动画
animation-name: 关键帧名, 关键帧名2
animation-duration: 动画一个播放周期持续的时间。
animation-delay: 延迟时间
animation-timing-function: 设置动画效果（三次贝塞尔曲线）
每一帧的播放顺序
animation-direction
- alternate 交替反向执行
- reverse 反向执行
- alternate-reverse 反向交替执行
控制播放次数
animation-iteration-count：
number
infinite 无限次播放
暂停
animation-play-state
running
paused 暂停（一般配合状态伪类使用）
填充：动画开始或者结束后使用第一帧或者最后一帧填充
animation-fill-mode：
backwards: 动画开始前，显示第一帧，（需要设置延迟执行时间）
forwards：动画开始后，显示最后一帧
both: 动画开始前，显示第一帧，（需要设置延迟执行时间）,动画开始后，显示最后一帧
注意事项：没有绝对的第一帧和最后一帧，与动画的播放顺序有关。
简写:
animation: 无顺序要求，如果出现两个时间，最后一个代表延迟时间。
与过渡类似，也存在样式覆盖问题。
//定义动画变化的规则
@keyframes 关键帧名 {
0% ~ 100%{
css样式（有部分样式不支持）
}
第一帧：0%{}, from{}
最后一帧：100%{}, to{}
//备注：每一帧的变化自动有补间动画，无需设置过渡效果
}
三、查看某一CSS样式在各浏览器支持情况
http://www.caniuse.com
四、圆角
border-radius: 左上，右上，右下，左下
border-radius: 左上，右上，右下，左下（x轴半径） / 左上，右上，右下，左下（y轴半径）