CSS3完结，拼多多练习

1.景深
perspective 视线的距离
perspective: 1200px;(加在父元素上)
transform:perspective(1200px); （在子元素中使用）

2.3D呈现
transform-style:preserve-3d;

3.3D位移
主要包括translateZ()和translate3d()
translateZ() 让元素在3D空间沿Z轴位移

4.3D旋转
rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)

5.CSS3动画
transform,transition,animation

@keyframes zhh {
			0%{初始属性}
			100%{结束属性}	
			}

简写 创建名 动画时间 延时 过渡类型 无限循环
animation: zzh 5s 0.5s linear infinite；

transition需要一个事件触发(hover或clik)
animation:与@keyframes zzh{…}配合使用

6.animation
1)animation-name:zzh 动画名称
2)animation-duration:3s 持续时间
3)animation-timing-function 过渡类型{ linear 线性过渡
ease 平滑过渡
ease-in由慢到快
ease-in-out 慢-快-慢
step-start 马上跳转到每一帧结束
的状态 }
4）animation-delay 动画开始前延迟的时间
5）animation-direction 是否反向运动{ normal 正常
reverse 反正向
alternate先