3.26，空间转换、动画
一、空间转换
1、空间位移
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform
2、透视
使用perpective属性实现透视效果
给父级添加perpective：数值加px(建议800-1200) z轴超过视距就会超出不见了 。
3、空间旋转
使用rotate实现元素空间旋转效果
注意：旋转的角度单位是deg
语法有以下：
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
4、立体呈现
使用transform-style: preserve-3d呈现立体图形
实现方法
添加 transform-style: preserve-3d;加给父级的
使子元素处于真正的3d空间
默认值flat, 表示子元素处于2D平面内呈现
操作：在同一个盒子里设置两个面，前面往前平移一个位置，后面往后移动相同位置（在translatez上用正值往前，用负值往后）。
5、3d导航
使用立体呈现技巧实现3D导航效果
绿色和橙色部分共需要3个标签
1个父级标签
绿色和橙色共2个标签（子级）
实现思路
搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
添加hover状态旋转切换效果
6、空间缩放
目标：使用scale实现空间缩放效果
语法
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z)
二、动画
使用animation添加动画效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
操作步骤
1、定义动画
@key frams 动画名称{
from{}开始（起始）
to{}结束（）
}
或者用百分比写法
@key frams 动画名{
0%{}
30%{}
100%{}
}
最后在目标标签的css上写属性
animation：动画名（name） 时长（duration） 速度曲线（timing-function） 延迟时间（delay） 重复次数（iteration-count） 动画方向（direction） 执行完毕时状态（fill-mode）;
play-state配合hover使用鼠标放上去后停止
备注：动画名称和时长必须赋值
如果有两个时间值第一个肯定是时长 第二个是延迟时间
延迟时间：比较常用于动画接力，上一个完成下一个在开始运动。
linear：匀速
infinite（重复动画一直重复不停歇）
alernate（来回运动 改变动画方向）
forwards(停留在动画结束的状态)
走马灯状态需要在图片之后设置补前面的图片营造循环显示的结果。
