05、CSS3-3D变换和动画

一、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);  // 即往前或往后(放大缩小)，另外效果也受到景深的影响 

注: Z轴方向即是垂直于窗口的；

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

二、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%的状态开始执行

案例: 无缝滚动