一、空间转换 transform

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

• 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同；z轴正方面——屏幕正对人眼睛得方向。

1. 空间位移——translate
   transform: translate3d(x, y, z);
   transform: translateX(值);
   transform: translateY(值);
   transform: translateZ(值);
   取值可取像素或者百分比

要想看到空间Z轴得空间转换效果，需要添加透视perspective属性
透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸）
a.perspective给谁添加：设置给使用了3d元素最近一级的父元素
b.视距的理解：相当于在给定的像素位置上设置一个眼睛，看盒子而已
c.空间转换时，为元素添加近大远小、近实远虚的视觉效果
/* 添加视距 取值范围：400~1200px pp */

2. 空间旋转-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（）