transform 2d/3d 語法入口(轉(zhuǎn)化)

• 移動 translate 可以改變元素在頁面中的位置，類似定位；

代碼連寫

• transform translate(100px),(100px) 括號里第一個是X軸,第二個是Y軸或者在后面加%

旋轉(zhuǎn)

• rotate
  transform:rotate(45deg); 單位是deg(度), 正值順時針. 關(guān)鍵詞繞著

縮放

• scale
  transform:scale(2,3) 使用場景: 鼠標(biāo)懸浮,按鈕放大 后面參數(shù)為倍數(shù)(無單位) 會受中心點的影響下面的子元素、文字、屬性會被縮放； 中心點的代碼:transform-origin 默認(rèn)旋轉(zhuǎn)的基準(zhǔn)點是中心點

2D綜合寫法:

• 移動在旋轉(zhuǎn)前面 transform: translate(x,y) rotate(90deg) scale(x,y); 旋轉(zhuǎn)在前面:transform:rotate(90deg) translate(x,y) scale(x,y)
  使用順序不同，出現(xiàn)的效果不同，因為旋轉(zhuǎn)會改變初始軸向，再次移動就會按照改變后的軸向進(jìn)行移動；

animation
@keyframs donghua {
          // 開始狀態(tài)
    from {
        transform: translateX(0px);
       background-color:red;
    }
       //   結(jié)束狀態(tài)
    to {
                 transform:translateX(1000px)
     background-color:yellow;

   }
}
    div {
      //  調(diào)用
      animation-name:donghua;
      // duration 持續(xù)時間
    animation-duration: 3s;
    
}
@keyframs donghua {
    0% {
   }
             50% {
   }
             // 結(jié)束狀態(tài)
    100%{
   }

}

 /* 勻速  */
    animation-timing-function: linear;
    /* 慢-快-慢  默認(rèn)值  */
    animation-timing-function: ease;
    /* 慢-快  */
    animation-timing-function: ease-in;
    /* 快-慢  */
    animation-timing-function: ease-out;
    /* 慢-快-慢  */
animation-timing-function: ease-in-out;

animation-timing-function：steps(n)  分步 實現(xiàn) 老電影一幀一幀，整個動畫分為幾步驟完成

動畫簡寫：動畫名稱 持續(xù)時間 速度曲線 等待時間 執(zhí)行次數(shù) 執(zhí)行的方向 動畫等待或結(jié)束的狀態(tài)

animation: name duration(動畫完成一個周期所花費的時間) timing-function(速度曲線) delay(動畫何時開始) iteration-count(動畫播放的次數(shù)) direction(是否在下一期逆向播放) fill-mode(結(jié)束后的狀態(tài))

3d更2d比多出一個z軸面對我們的方向 寫在一起：tansform: translateX(100px) translateY(100px) translateZ(100px) 三個方向同時寫：transform: translate3d(100px,100px,100px);

• XY 方向可以設(shè)置px值和%（因為有寬高）；
• Z 軸只能設(shè)置 px，不能設(shè)置%（原因是盒子沒有厚度）；
  子元素做3D轉(zhuǎn)換，需在其父級上加transform-style屬性，這樣子元素做的3D轉(zhuǎn)化才能為觀測到；

• transform-style: preserve-3d;
• 視距 perspective保證盒子的移動能被觀測到近大遠(yuǎn)小的效果；產(chǎn)生透視感 perspective: 1000px;