05、CSS3-3D变换和动画

一、浏览器坐标系

从左到右的方向是浏览器x轴的正方向;

从上到下的方向是浏览器y轴的正方向;

z轴正方向是面对于我们的;

浏览器坐标系

二、3D变换

• transform-style建立3D空间

    transform-style: preserve-3d;
  

• perspective 景深

    perspective: 300px;
  

  景深是指相机对焦点前后相对清晰的成像范围。景深就是我们的肉眼距离显示器的距离。景深越大，元素离我们越远，效果就不好

• perspective- origin 景深基点

    // 即站在那个方位看物体，默认是center center
    // left top即左上角位置看物体
    perspective-origin: left top;
  

• transform 新增函数

    - rotateX()
    - rotateY()
    - rotateZ()
    - translateZ()
  
    transform: rotateX(360deg);
    transform: rotateY(360deg);
    transform: rotateZ(360deg);  // 即是旋转效果
    transform: translateZ(-100px);  // 即往前或往后(放大缩小)，另外效果也受到景深的影响 
  

  案例: 立体矩形

  案例: 轮播图(立体切换效果)

• rotateX()让元素绕着x轴旋转，角度越大，元素绕着x轴顺时针旋转rotateX类似秋千运动
  

  rotateX类似秋千运动

• rotateY()让元素绕着y轴旋转，角度越大，元素绕着y轴顺时针旋转 rotateY类似钢管舞运动
  

  

  rotateY类似钢管舞运动

• rotateZ()让元素绕着z轴旋转，角度越大，元素绕着z轴顺时针旋转 rotateZ类似于方向盘转动
  

  

  rotateZ类似于方向盘转动

三、animation动画

• 关键帧——keyFrames

    - 类似于flash
      只需指明两个状态，之间的过程由计算机自动计算
    - 关键帧的时间单位
      数字：0%、25%、100%等
      字符：from(0%)、to(100%)
    - 格式1
      @keyframes 动画名称
      {  动画状态  }
  

    #box{
      // 动画时长、动画名称
      animation: 2s Move;
    }
  @keyframes Move{
      0%{
          width: 100px;
      }
      100%{
          width: 400px;
      }
    }
  

    #box{
      // 动画时长2s、延迟3s、动画名称
      animation: 2s 3s Move;
    }
  @keyframes Move{
      from{
        width: 150px;
        background: blue;
       }
      to{
        width: 300px;
        background: purple;
      }
  }
  

• animation-timing-function 动画运动形式

    - linear  匀速
    - ease  缓冲
    - ease-in  由慢到快
    - ease-out  由快到慢
    - ease-in-out  由慢到快再到慢
    - cubic-bezier(number, number, number, number)  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
  

• animation-delay 动画延迟

    只是第一次
  

• animation-iteration-count 重复次数

    infinite为无限次
  

• animation-play-state 播放状态

    - running 播放 
    - paused 暂停
  

• animation-direction 播放前重置

  动画是否重置后再开始播放
    - alternate   动画直接从上一次停止的位置开始执行
    - normal  动画第二次直接跳到0%的状态开始执行
  

  案例: 无缝滚动