空间转换和设置动画

3d空间转换平移

   属性:srabsform:translate3d(??px,??px??px)x轴，y轴，z轴

   正负均可

3d空间旋转

    transform：rotateZ（角度deg）
   
   当左手握住旋转轴时四指对准旋转方向，大拇指伸直对准的是正负轴
   
    给要旋转的元素最近一级的父元素设置透视
    

透视

    perpective：数字px
    
    pp只是增加了近大远小的效果并不是开启了3d

    pp给谁添加？给具有3d属性的盒子的最近一级父元素添加

    pp是什么意思？视距，透视，景深

    pp给了之后会实现什么效果？近大远小，近实远虚

    pp是怎么理解的？例如 pp:800px?==>起始距离屏幕800px的地方安排一只眼睛去看屏幕
 

立体呈现

    transform-style:preserve-3d:
    
    给谁设置：和pp一样，给具有3d属性盒子的最近一级父元素设置
    
    使子元素处于真正的3D空间
    
    默认值flat，表示所有子元素在2D平面呈现
    
    
    # 二、动画

1. 动画实现步骤

动画注意点：

   1.动画的名称不能为running，否则动画不生效；
   2.多个动画之间动画的名称不能重复;
   3.一次动画完成之后，默认会突然一下回到最初的状态
  ```

动画实现步骤

  .box1 {
    width: 200px;
    height: 100px;
    background-color: skyblue;
  

一. 定义动画：让宽度从200变大到600 在定义动画的时候，如果动画的起始状态和调用这个动画的盒子本身属性值是一样的，那么from就可以省略不写

  @keyframes bigger {
           from {
              规定的刚开始的状态，正常书写css样式
              width: 200px;
                } 

                to {
               /* 规定最终的状态 */
               width: 600px;
                  }
                    }

  .box2 {
    width: 200px;
    height: 100px;
    background-color: tomato;
    /* 2.调用动画 */
    animation: move 4s;
  }

二. 定义动画：200100 到 500300 到 800*500

  1.定义动画 百分比可以实现阶段性的动画
  @keyframes move {
    50% {
      width: 500px;
      height: 300px;
    }

    100% {
      width: 800px;
      height: 500px;
    }
  }
</style>

2.animation复合属性

     2.调用动画
  
      延迟时间：动画开始执行之前要等待的时间 s/ms
      动画播放次数：infinite 无限次播放
      动画播放方向：alternate 交替播放
           
  速度曲线：默认 ease；
   
      1. linear 匀速播放 ，一般用在补间动画(连续的动画播放) 
      2. steps(次数)一般配合精灵图使用，用在逐帧动画，一步一步的去完成的动画；
     执行完毕时的状态：forwards 动画会停在动画结束时的状态；
  注意点：
   
       动画名称和播放一次动画的时长必须写，其他属性需要就写
       forwards不能和infinite结合使用，否则不生效
       animation 里面属性值 不分先后顺序
       当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
      
写法:

    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        animation: change 2s steps(4) alternate infinite;
      }
      /* 1.定义动画 */
      @keyframes change {
        to {
          width: 500px;
          height: 500px;
          background-color: orange;
          border-radius: 50%;
        }
      }
      
      暂停动画一般配合hover使用
      谁在调用动画，就给谁设置:hover 去暂停动画
       */
      .box:hover {
        animation-play-state: paused;
      }
    </style>

3.使用steps实现逐帧动画

• 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

• animation-timing-function: steps(N)；

  • 将动画过程等分成N份

4.能够使用animation属性给一个元素添加多个动画效果

• 多组动画使用逗号隔开

\