景深:远小近大 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)名字和时间已经可以调用动画执行了;