一，空间转换
1.空间位移
1.Z轴的正方向为屏幕到人的眼睛的方向
transform: translateZ(0);
2.网页默认显示是2d的，看不到3d效果的
transform: translate3d(100px,100px,200px);
transform: translate3d(100px,100px,200px);
2.透视效果
1.透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸）
2.添加视距 取值范围：400~1200px pp 。
3.对视距的理解：其实就是在取值的地方安排一只眼睛 。
4.值越小则z轴的变动越大。
5.3d的元素：包含x，y，z轴。
3.空间旋转
1.空间旋转--Z轴
顺时针旋转
transform: rotateZ(360deg);
逆时针旋转
transform: rotateZ(-360deg);
2.空间旋转---X轴
顺时针旋转
transform: rotateX(360deg);
逆时针旋转
transform: rotateX(-360deg);
3.空间旋转---Y轴
顺时针旋转
transform: rotateY(360deg);
逆时针旋转
transform: rotateY(-360deg);
4.立体呈现
1.tfs和pp有什么区别？
添加视距只是增加了一个近大远小的效果，并没有真正的开启3d模式。
2.tfs写在哪里？和PP写的地方一样。
3.开启3d要用tfs，和pp作用的对象是一样的。
3D导航栏案例，代码如图：
二.动画
1-动画效果实现的步骤：
1.首先要定义动画，使用 @keyframes代码加自定义动画名称。
定义动画的百分比可以实现阶段性的动画
2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长。
如：animation: kid 2s;
从初始的状态到结束的状态：
（如果使用该动画的盒子样式和初始状态的样式一样，则可以不写初始状态 ）
from {
width: xxx px;
}
结束的状态
to {
width：xxx px；
}
注意点：
1.动画的类名不能重复，否则会被覆盖 。
2.只要是可以参与过渡的css属性，都可以参与动画。
3.动画的名称不能用running （因为running是关键词）
2-animation复合属性
首先定义动画代码 @keyframes+自定义动画名。
1.暂停动画
谁在调用动画就给谁设置：hover 去暂停动画
.box:hover {
animation-play-state: paused;
}
2.补间动画：动画执行过程中，没有间隔，非常丝滑。
使用的速度曲线默认为：ease；linear。
3.逐帧动画：一步一步的执行动画中间会有间隔。
使用的速度曲线：steps（正整数）
逐帧动画又叫精灵动画，因为逐帧动画常常配合精灵图使用 。
其次调用动画
1.延迟时间：动画开始之间要等待的时间 s/ms
2.动画播放次数：infinite 无限次播放
3.动画播放方向：alternate 交替播放
4.速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
5.执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待（延迟）时间。
3-体验案例---跑动精灵图
代码如图：
三.综合案例---走马灯
代码如图：
