空间转换
空间位移
属性：transform
语法：transform：translate3d（X,Y,Z）;
取值：
1.像素
2.百分比
image.png
透视
属性：perspective(添加给父元素)
语法：perspective：值;
取值一般在400px~1200px之间
空间转换时为元素添加近大远小，近实远虚的视觉效果
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
image.png
空间旋转
属性：transform
语法：
transfrom：rotate3d（X，Y，Z）；
transfrom：rotateX（角度值）；
transfrom：rotateY（角度值）；
transfrom：rotateZ（角度值）；
image.png
立体呈现：
语法：transform-style: preserve-3d
步骤：
1.给父盒子添加transform-style: preserve-3d
2.给子盒子添加空间转换属性（位移和旋转）
image.png
空间缩放
语法：
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
动画
属性：animation
构成动画的最小单元：帧或动画帧
注意点：
1.动画名称不能重复
2.动画名称不能使用running
3.可参与css过渡属性的都可以参与动画
4.如果调用动画初始样式和盒子样式一样则可省略不写
步骤：
1.语法：@keyframes 动画名称{
from{ }
to { }
}
image.png
image.png
2.使用动画：animation：属性值；
image.png
image.png
image.png
注意：
1.动画名称和时长必须赋值
2.取值不分先后顺序
3.有两个时间，第一个表示时长，第二个表示延迟
image.png
逐帧动画和补间动画
image.png
逐帧动画语法：animation-timing-function: steps(N)；
暂停动画一般配合hover使用
