景深：远小近大 100~1200px之间的整百值
1）可以在父级元素上添加 perspective:1200px （主要方式）
2）可以在子级元素上添加 transform:perspective(1200px)
3D：
实现3D场景：transform-style：preserve-3d （默认值为flat 2D空间）---给父级元素添加
3D位移：transform：translate3d（x，y，z）/translateZ（）
3D旋转：transform：rotate3d（1，1，0，30deg） --x y z以矢量值表示，0关1开
---有多个功能函数的时候，可以写在一起 之间用空格隔开（先位移再旋转缩放）
---如transform: translateX(200px) rotateY(60deg);
动画：
过渡和动画都可控制元素在浏览器中运动，区别是：
---过渡需要人为触发，如hover、点击等事件；动画不需要，浏览器加载时就会自动执行；
帧动画的使用：
1）定义/声明帧动画 @keyframes：动画名（自定义）{运动方式}
--单次运动 from{ } to{ } ；
--循环运动 0%{初始状态属性} 50%（中间再可以添加关键帧） 100%{结束状态属性}；
2）执行/调用动画 属性{ animation: divMove 3s linear infinite }
动画的名字 animation-name
动画运动的持续时间 animation-duration
动画的运动的类型 nimation-timing-function
动画的延迟 animation-delay
动画的运动次数 animation-iteration-count ：数字/infinite（无线循环）
动画运动方向 animation-direction：normal（顺时针）/reverse（逆时针）
可以动画暂停和运行 animation-play-state：running/paused
简写/复合写法 animation：名字 时间 linear infinite；
注意：1）设置动画设置定位属性 相对+绝对定位；
2）设置位置的时候 位置的属性必须相同；
3）名字和时间已经可以调用动画执行了；