一，空间转换

目标：使用transform属性实现元素在空间内的位移，旋转，缩放等效果
1：空间：是从坐标轴角度定义的,X,Y和Z三条坐标轴构成了一个立体·空间·，Z轴位置与视线方向相同。
2：空间转换也叫3D转换。
3：属性：transform

空间位移：

目标：使用translate实现元素空间位移效果
语法：1：transform-translate3d（x,y,z）；
      2：transform-translateX（值）；
      3：transform-translateY（值）；
      4：transform-translateZ（值）；
取值：（正负均可）
      1：像素单位数值
      2：百分比
      

透视：

 目标：使用perspective属性实现透视效果
      透视距离也称为视距，所谓的视距就是人眼睛到屏幕的距离
 属性：（添加给父级）
       1：perspective：值;
       2:取值：像素单位数值，数值一般在800-1200.
 作用：
 空间转换时，为元素添加近大远小，近实远虚的视觉效果
 

空间旋转：

 目标：使用rotate实现元素空间旋转效果
 语法：1:transform-rotateZ（值）；
       2:transform-rotateX（值）；
       3:transform-rotateY（值）；
 左手法则：
     判断旋转方向，左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
  扩展：
      1：rotate3d（x,y,z角度度数）：用来设置自定义旋转轴的位置及旋转的角度
      2：x,y,z取值为0-1之间的数字

立体呈现：

  目标： 使用transform-style: preserve-3d呈现立体图形
  思考：使用perspective透视属性能否呈现立体图形？
  答：不能，perspective只增加近大远小、近实远虚的视觉效果。
  实现方法：
  添加 transform-style: preserve-3d;
  使子元素处于真正的3d空间
  
  呈现立体图形步骤
       1. 盒子父元素添加transform-style: preserve-3d；
       2. 按需求设置子盒子的位置（位移或旋转）
  注意：
  空间内，转换元素都有自已独立的坐标轴，互不干扰
  

空间缩放：

  目标：使用scale实现空间缩放效果
  语法：1：transform: scaleX(倍数);
        2：transform: scaleY(倍数);
        3：transform: scaleZ(倍数);
        4：transform: scale3d(x, y, z);
        

二，动画

  目标：使用animation添加动画效果
      思考：过渡可以实现什么效果？
      答：1：实现2个状态间的变化过程
          2：动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
          
          1：动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
          2：构成动画的最小单元：帧或动画帧

动画实现的步骤

          1：定义动画：@keyframes 动画名称 {
                       from{}
                       to{}
          }
          2：定义动画：@keyframes 动画名称 {
                       0%{}
                       10%{}
                       15%{}
                       100%{}
          }
          
          2：使用动画：animation：动画名称 动画花费时长；

动画属性：

    目标：使用animation相关属性控制动画执行过程
    animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
    注意：
        1：动画名称和动画时长必须赋值
        2：取值不分先后顺序
        3：如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
    属性：                   作用：                      取值：
animation-name             动画名称  
animation-duration         动画时长
animation-delay            延迟时间
animation-fill-mode        动画执行完毕时状态     forwards：最后一帧状态  backwards：第一帧状态
animation-timing-funcion   速度曲线              steps（数字）：逐帧动画
animation-iteration-count  重复次数              infinite为无限循环播放
animation-direction        动画执行方向           alternate为反方向
animation-play-state       暂停动画              paused为暂停，通常配合：hover使用

目标：使用steps实现逐帧动画
    逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
    animation-timing-function: steps(N)；
    将动画过程等分成N份
    

精灵动画制作步骤

    准备显示区域
    设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
    定义动画
    改变背景图的位置（移动的距离就是精灵图的宽度）
    使用动画
    添加速度曲线steps(N)，N与精灵图上小图个数相同
    添加无限重复效果