一.空间转换

1.空间位移

网页默认是2d的，看不到3d效果
z轴正方向是屏幕到人眼的方向

2.透视效果

perspective:400~1200px;
透视，视距，景深 设置给使用了3d元素的最近一级的父元素（亲爸爸）
视距只能开启近大远小的效果，不能开启3d效果
transform-style:preserve-3d;开启3d效果，让子元素呈现在3d图形中

3d元素

包含x或y或z轴的元素

3.空间旋转

沿着多条对称轴旋转
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

二.动画

1.如何使用动画

1.定义动画
@keyframes name {
from {
开始的状态
}
to {
结束的状态
}
}
2.调用动画 animation
第一个参数是你定义的动画名称，第二个参数是动画时长

注意事项

  /* 1.动画名不能重复 */
  /* 2.可参与动画的属性：学过的大部分属性 */
  /* 3.动画名不能用running */
  /* 4.如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写 */

2.animation复合属性

animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
............... 必须属性 必须属性 linear ......................infinite .... alternate ....... forwards
<动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； linear 匀速播放
执行完毕时的状态：forwards 动画会停在动画结束时的状态>

3.暂停动画

一般配合：hover使用
谁调用动画就给谁设置:hover来暂停动画
.class:hover{
animation-play-state:paused;
}

4.补间动画与逐帧动画

    补间动画:动画执行过程中，没有间隔，非常平滑
    使用的速度曲线:默认为ease：linear
    
    逐帧动画：一步一步去执行的动画，中间会有间隔
    使用的速度曲线：steps （正整数） 
    逐帧动画又叫精灵动画，逐帧动画经常配合精灵图去使用

奔跑案例

奔跑.png

1.定义让人物跑起来的动画
2.调用让人物跑起来的动画
3.定义盒子往右移动
4.调用让盒子右移的动画

11.png

2.png

3.png