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

案例: 无缝滚动

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。