空间位移
属性：transform
一、空间:
x 、y 和z三条坐标轴构成了一个立体空间,z轴的正方向为屏幕到人的眼睛的方向
二、语法:
1.transform: translate3d(x, y, z)
2.transform: translateX(值);
3.transform: translateY(值);
4.transform: translateZ(值);
三、取值（正负）
1.像素单位数值
2.百分比
四、特点
网页默认显示是2d的，看不到3d效果的
透视，视距，景深
属性：perspective
一、视觉效果
近大远小、近实远虚
二、知识点
1.pp需要给谁添加
设置给使用了3d元素的最近一级的父元素(亲爸爸)
2.视距的理解
其实就是在取值的地方安排了一只眼睛去看这个屏幕而已
3.添加视距 取值范围
400~1200px pp
空间旋转
transform: rotate（deg）
Z轴 transform: rotateZ（和transform: rotate的效果一样）
X轴 transform: rotateX
Y轴 transform: rotateY
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
立体呈现
transform-style: preserve-3d
tfs和pp的区别
1.pp只是添加一次近大远小的效果，没有真正开启3D
2.开启3D需要添加tfs，和pp作用的对象是一样的
动画
一、目标
使用animation添加动画效果
二、动画
本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
三、实现步骤
- 定义动画
@keyframes 动画名称 -
使用动画
from、to
animation: 动画名称 动画时长
微信截图_20220402163338.png
百分比可以实现阶段性的动画
@keyframes move{0%-100%}微信截图_20220402163348.png
四、注意点
1.动画的名称不能重复
2.可参与过渡的css属性都可以参与动画
3.动画的名称不能使用running
4.如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写
动画的复合属性（不分先后顺序）
一、必须属性
1.动画名称
2.动画时长
二、需要记住
1.linear 匀速播放
2.infinite 无限次播放
3.alternate 交替播放
4.forwards 动画会停在动画结束时的状态
steps实现逐帧动画
animation-timing-functio：steps(数字)
