一、空间转换 transform
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
- 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同；z轴正方面——屏幕正对人眼睛得方向。
- 空间位移——translate
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值可取像素或者百分比
要想看到空间Z轴得空间转换效果，需要添加透视perspective属性
透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸）
a.perspective给谁添加：设置给使用了3d元素最近一级的父元素
b.视距的理解：相当于在给定的像素位置上设置一个眼睛，看盒子而已
c.空间转换时，为元素添加近大远小、近实远虚的视觉效果
/* 添加视距 取值范围：400~1200px pp */
- 空间旋转-rotate
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
如何判断图片的旋转方向——使用左手法则
左手法则判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
image.png
- transform-style: preserve-3d 和 perspective的对比
a. 都是给父元素添加
b. transform-style: preserve-3d是使子元素处于真正的3d空间，可以呈现出立体图形；而perspective属性只是给子元素提供了近大远小、近实远虚的视觉效果
二、动画
实现动画的步骤：
/* 1. 定义动画：让宽度从200变大到600 */
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
/* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
animation: change 2s;
使用动画注意点：
1.动画的名称不能重复
2.可参与过渡的css属性都可以参与动画
3.动画的名称不能为 running 它是关键词
4.如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写
-
使用animation相关属性控制动画执行过程
image.png- 调用动画
延迟时间：动画开始之间要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
- 调用动画
补间动画：比较平滑的动画——用速度曲线linear
逐帧动画：配合精灵图一帧帧跳动的动画——只能用速度曲线step（）
