一、景深
- perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
1.perspective: 1200px;（在父元素中使用）
2.transform:perspective(1200px) （在子元素中使用）
-二选一即可（一般用第一种）
二、3D
1.浏览器默认的空间是2d空间，设置z轴的前提条件时让浏览器形成3d空间
-transform-style:flat(默认值2d)/preserve-3d
2.位移
-transform-translatez()：在z轴上移动
-transform-translate3d(x，y，z)
3.旋转
-transform-rotatez()：在z轴上旋转（默认）
-transform-rotate3d(x，y，z的矢量值，角度值)
扩展：backface-visibility：hidden（背面不可见）做3d时有些面是看不见的，可设置不可见
三、关键帧动画
1.条件：
-需要声明帧动画
-在css样式表中声明
-@keyframs 动画的名字{动画的运动方式}
-第一种：单次运动方式：@keyframes mymove{from{初始状态属性} to{结束状态属性} }
-第二种：多次运动方式： @keyframes mymove{0%{初始状态属性}50%（中间再可以添加关键帧）100%{结束状态属性} }
-调用动画
-使用动画的属性调用，哪个属性移动就给哪个属性添加动画
-属性（简写：animation：name（名称） duration（持续时间） timing-function（动画频率） delay（延缓时间）infinite（定义循环方式为无限循环） alternate（定义动画方式） ）
-animation-name
-animation-duration
-animation-timing-function
-animation-delay
-animation-iteration-count
-animation-direction
-animation-play-state
-扩展：step-start：省略开始和结束之间的运动间隙可替代linear（匀速）属性值，实现动画丝滑
2.注意：
-动画需要结合定位属性使用
-起始和结束的位置属性一定要相同
3.总结
-相同点：可以控制元素在浏览器中移动
-不同点：过渡需要人为控制（hover）刷新，动画可自行播放
