空间转换 平移
transform:translateZ()
z轴是指垂直屏幕向外的轴
可以实现z轴方向的位置偏移
transform:translate3d(x,y,z)
旋转
transform:rotateZ()
平面旋转就是围绕Z轴旋转
transform:rotateX()
transform:rotateY()
transform:rotate3d(x,y,z,deg)
x,y,z的作用是描述一个方向，一个向量
缩放
scale3d()
透视（视距）
perspective:400~1200 px
就是指人眼观察物体的距离
3d呈现
transform-style:preserve-3d
作用：默认情况下，子元素的3d效果并不会保留下来，如果需要保留，
需要在父容器中设置这个样式
左手定则
大拇指沿着轴的正方向，手指环绕方向就是正值
**动画 ** 基本使用步骤
-
1.定义动画
@keyframes 动画名称 {
form{} 初始状态，如果和盒子状态相同可省略 0%{}
to{} 结束状态 100%{}
}
-
2.调用动画
animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行 完毕时状态
速度曲线：linear 匀速 补间动画
速度曲线：steps(数值) 逐帧动画
重复次数：infinite 无限播放
动画方向：alternate 交替播放
执行完毕时状态：forwards 停止在结束状态，不能和infinite结合使用，否则失效
animation-name:动画名称，必须
animation-duration:动画时长，必须
animation-timing-function:速率曲线： linear匀速
animation-interation-count:动画次数，infinite
子主题 6
