3D轉(zhuǎn)換

三維變換使用基于二維變換的相同屬性，可以讓我們基于三個坐標(biāo)方向?qū)υ剡M行變換。和二維變形一樣，三維變形可以使用transform屬性來設(shè)置

3D移動

translate3d(x,y,z) 使元素在這三個緯度中移動,也可以分開寫，如：translateX(length),translateY(length), translateZ(length)

3D縮影

scale3d(number,number,number)使元素在這三個緯度中縮放，也可分開寫，如：scaleX(),scaleY(),scaleZ()

3D旋轉(zhuǎn)

a) rotate3d(x,y,z,angle)：指定需要進行旋轉(zhuǎn)的坐標(biāo)軸
a) rotateX(angle) 是元素依照x軸旋轉(zhuǎn)；
b) rotateY(angle) 是元素依照y軸旋轉(zhuǎn)；
c) rotateZ(angle) 是元素依照z軸旋轉(zhuǎn)

3D透視/景深效果

左手法則：大拇指指向當(dāng)前坐標(biāo)軸的下方向，手指環(huán)繞的方向就是正方向

• perspective(length)
  為一個元素設(shè)置三維透視的距離。僅作用于元素的后代，而不是其元素本身。當(dāng)perspective:none/0;
  時，相當(dāng)于沒有設(shè)perspective(length)。比如你要建立一個小立方體，長寬高都是200px。如果你的
  perspective < 200px ，那就相當(dāng)于站在盒子里面看的結(jié)果，如果perspective 非常大那就是站在非常遠的地方看（立方體已經(jīng)成了小正方形了），意味著perspective 屬性指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果
• perspective-origin 屬性規(guī)定了鏡頭在平面上的位置，默認是放在元素的中心
• transform-style 使被轉(zhuǎn)換的子元素保留其3D轉(zhuǎn)換(需要設(shè)置在父元素中）

flat   子元素將不保留其3D位置——平面方式
preserve-3d  子元素將保留其3D位置——立體方式

嘗試一下

  body,html {
    background: #222;
    font-size: 22px;
    color: rgb(18, 204, 250);
  }
  .page {
    position: relative;
    max-width: 640px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #373737;
  }
  .cude{
    position:absolute;
    top:200px;
    left:100px;
    width: 100px;
    -webkit-perspective: 1000px;
    perspective: 1500px;
  }
  .dice {
    position: absolute;
    width: 300px;
    height: 300px;
    transform: rotateX(-15deg) rotateY(47deg);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: rotate 6s linear infinite alternate;
  }
  
  .dice .side {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    background: rgba(241, 160, 8,.4);
    text-align: center;
    line-height:300px;
    color:#fff;
    font-size:40px;
    font-weight: bold;
    border:1px solid orange;
    animation: move 6s linear infinite alternate-reverse;
  }
  .front{
    transform:translateZ(150px);
  }
  .top{
    transform: rotateX(90deg) translateZ(150px);
  }
  .bottom{
     transform: rotateX(-90deg) translateZ(150px);
  }
  .left{
        transform: rotateY(-90deg) translateZ(150px);
}
  .right{
    transform: rotateY(90deg) translateZ(150px);
  }
  .back{
     transform: rotateY(-180deg) translateZ(150px);
  }
  @keyframes move {
    0% {}
    100% {
      width: 300px;
      height: 300px;
    }
  }
  @keyframes rotate {
    0%{
      transform: rotate3d(0,0,0,0deg);
    }
    100% {
      transform: rotate3d(45,45,45,720deg);
    }
  }

關(guān)鍵幀動畫

動畫是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果

• 必要元素
  a. 通過@keyframes指定動畫序列； 自動補間動畫，確定兩個點，系統(tǒng)會自動計算中間過程，這兩個點就稱為關(guān)鍵幀，可以設(shè)置多個關(guān)鍵幀
  b. 通過百分比將動畫序列分割成多個節(jié)點
  c. 在各個節(jié)點中分別定義各屬性
  d. 通過animation將動畫應(yīng)用于相應(yīng)元素
• animation常用屬性
  a. 動畫序列的名稱:animation-name: move;
  b. 動畫的持續(xù)時間:animation-duration: 1s;
  c. 動畫的延時:animation-delay: 1s;
  d. 播放狀態(tài):animation-play-state: paused|running;
  e. 播放速度:animation-timing-function: linear;
  f. 播放次數(shù) 反復(fù):animation-iteration-count: 1;
  g. 動畫播放完結(jié)后的狀態(tài):animation-fill-mode: forwards;
  h. 循環(huán)播放時，交叉動畫:animation-direction: alternate;

先來看個簡單的demo

嘗試一下

  .wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1100px;
    height: 900px;
    overflow: hidden;   
    animation: dropdown 6s linear infinite;
  }
  .container {
    position: absolute;
    left: 0;
    width: 25300px;
    height: inherit;
    animation: move 2s steps(23) infinite ;
  }
  .container img {
    float: left;
    width: 1100px;
    height: 900px;
  }
  @keyframes move{
    to{
      left: -25300px;
    }
  }
  @keyframes dropdown{
    0%{
      top: -1900px;
    }
    40%,70%{
      top: 0;
    }
    100%{
      top: 1900px;
    }
  }
  .txt {
    position: absolute;
    left: -236px;
    width: 300px;
    font-size: 48px;
    color: orange;
    text-shadow: 0 0 18px deeppink;
    writing-mode: vertical-rl;
    
    animation: gogogo 10s ease-in infinite;
  }
  @keyframes gogogo{
    from{
      top: -500px;
    }
    to{
      top: 1000px;
    }
  }
  .wrapper:before {
    position: absolute;
    left: 0;
    z-index: 99;
    content: "";
    width: 8px;
    height: 900px;
    background: deepskyblue;
    box-shadow: 0 0 10px 4px skyblue;
    animation: line 6s infinite alternate;
  }
  .wrapper:after {
    position: absolute;
    right: 0;
    z-index: 99;
    content: "";
    width: 8px;
    height: 900px;
    background: deepskyblue;
    box-shadow: 0 0 10px 4px skyblue;
    animation: line 6s infinite alternate;
  }
  @keyframes line{
    from{
      height: 0;
    }
    to{
      height: 900px;
    }
  }