css3
动画效果
1.变形转换 transform
变形中心点 transform-origin 两个数字确定中心点
//transition: all 1s;//补间动画 all所有类型 1s变形时间
transition-property: width;//应用过渡的属性
transition-duration: 2s;//过渡持续时间
transition-delay: 1s;//过渡效果推迟时间
transition-timing-function: cubic-bezie;//过渡的效果
2d转换
（1）移动translate（x，y） x水平方向 y竖直方向
（2）旋转rotate（40deg）：正数表示顺时针旋转 相反为逆时针
（3）缩放scale（x，y）水平·竖直方向缩放倍数
（4）倾斜 skew（deg，deg）元素按一定角度倾斜
3d转换
（1）旋转 rotateX（deg）rotateY（deg）rotateZ（deg）
（2）移动 translateX（）translateY（）translateZ（）
translate3d（x，y，z）xy可以是像素或百分比 z只能是像素
视距:眼睛到电脑屏幕距离 越近越明显3d 加在旋转元素的父级上
2.过渡变化（translation）
3.动画
在运动对象内
animation：动画名 时间 运动曲线 延迟时间 infinite（播放次数） alternate（是否反方向运动）
@keyframes 动画名{
from{}//起始位置
to{}//终止位置
0%{}
50%{}
100%{}
}
伪类选择器
.door1::before,.door2::before{
/*伪元素 插入一个元素标签*/
content: "";
z-index: 1;/*z轴的值 越大越优先级*/在几张图片叠在一起时可能使用
