3D变换

3D变换
1.transform之3d移动变换:
transform:translate3d(x,y,z)
z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。
transform:translateZ(z)

2.transform-style规定变换的样式（父元素）
属性值：flag平面（默认） preserve-3d保持3d变换
transform-style: preserve-3d 保持3d变换

3.设置观察的距离，景深 perspective:value(父元素)

4.transform之rotate3d
transform:rotate3d(x,y,z,角度)
此时x、y、z取值为0或1，0代表不旋转，1旋转
transform:rotateX(角度) transform:rotateY(角度) transform:rotateZ(角度)

    备注：左手定律，大拇指指向轴的正方向，手指弯曲的方向为旋转的正方向 

5.立方体
改变盒子变换的基准点transform-origin
perspective-origin 观察的基准点(角度)

动画：
1.自定义动画
（1）通过@keyframes指定动画序列；
@keyframes{
0%{}
50%{}
70%{}
100%{}
}
（2）通过百分比将动画序列分割成多个节点；
（3）在各节点中分别定义各属性
（4）通过animation属性将动画应用于相应元素；

2.animation属性
(1)animation-name动画名字(必须)
(2)animation-duration动画播放时间（必须）
(3)animation-timing-function 动画播放的形式
属性值： linear线性 ease ease-in steps(n)
(4)animation-delay 动画播放的延迟
(5)animation-iteration-count 动画播放的次数 infinite无限次播放
(6)animation-direction 动画是否轮流反向播放
属性值:alternate交替播放 reverse反向播放 alternate-reverse 轮流反向
animation:1 2 3 4 5 6 ;
补充：(1)animation-play-state:paused; 暂停动画

(2)animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。
属性值：forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）