空间位移

属性：transform

一、空间:
x 、y 和z三条坐标轴构成了一个立体空间,z轴的正方向为屏幕到人的眼睛的方向

二、语法:
1.transform: translate3d(x, y, z)
2.transform: translateX(值);
3.transform: translateY(值);
4.transform: translateZ(值);

三、取值（正负）
1.像素单位数值
2.百分比

四、特点
网页默认显示是2d的，看不到3d效果的

微信图片_20220402152359.png

透视，视距，景深

属性：perspective

一、视觉效果
近大远小、近实远虚

二、知识点
1.pp需要给谁添加
设置给使用了3d元素的最近一级的父元素(亲爸爸)
2.视距的理解
其实就是在取值的地方安排了一只眼睛去看这个屏幕而已
3.添加视距 取值范围
400~1200px pp

微信图片_20220402152334.png

空间旋转

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添加动画效果

二、动画
本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧

三、实现步骤

1. 定义动画
   @keyframes 动画名称

2. 使用动画
   animation: 动画名称 动画时长
   

   from、to
   微信截图_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(数字)

微信截图_20220402173541.png