一，空間轉換3D

3D坐標系：3D坐標系比2D多了一個Z軸

一定要記住3個坐標取值的正反：

X軸往右越大，是正值，否則反之

Y軸往下越大，是正值，否則反之

Z軸（指向我們）越大，是正值，否則反之

3D位移：

有完整寫法：

taansform:translate3d(x,y,z);

只不過在很多情況下，我們喜歡分開寫：

transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);

 透視

透視的作用：空間轉換時，為元素添加近大遠小，近實遠虛的視覺效果

語法：

perspective:800px

透視註意事項：

1.取值範圍經常在800PX~1200px之間。

2.一定給父級添加

3.透視距離也稱為視距，所謂的視距就是人的眼睛到屏幕的距離。

3D旋轉

有了透視的加持，我們3D旋轉效果會比較明顯。

rotateX

類似單杠旋轉

註意：預設的旋轉中心在盒子的中心位置。

body{
/*父級添加透視*/
    perspective:400px;
}

img{
     transition:all 1s;   
}
img:hover{
    tranform:rotateX(360deg);
}

rotateY

類似鋼管舞

body{
    perspective:400px;
}
img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

左手法則

一定要搞清楚X軸和Y軸如何旋轉的，旋轉的度數是正值還是負值。

規則：

1.大拇指指向X軸正向方（右），則四指指向的方向是旋轉的方向

2.大拇指指向Y軸正向方（下），則四指指向的方向是旋轉的方向

立體呈現

讓子盒子在父盒子內有空間的展示，此時可以給父親添加

transform-style；presrrve-3d;

二、動畫（重點）

動畫最大的特點可以不用滑鼠觸發，自動的，反覆的執行某些動畫。

動畫使用分為定義和調用：

1.定義：

/*1.定義的動畫*/
@keyframes dance{
    from {
    transform：scale(1)
}

to {
    transform:scale(1.5)
}
}

或者是

 /* 1. 定義的動畫 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2.調用

img{
width:200px;
  /* 2. 使用動畫  animation: 動畫名稱 執行時間;   infinite 迴圈*/
    animation: dance .5s infinite;
}

動畫屬性

1.動畫名字參照css類選擇器命名

2.動畫時長和延遲時間別忘了帶單位S

3.infinate 無限迴圈動畫

4.alternate 為反向 就是左右來回執行動畫（跑馬燈）

5.forwards 動畫結束停留在最後一幀狀態

6.linear 讓動畫勻速執行

滑鼠經過暫停動畫

/*滑鼠經過box，則ul停止動畫*/
.box:hover ul{
        animation-play-state:paused;
}

多組動畫

/*我們想要2個動畫一起執行 animation: 動畫1，動畫2，..動畫n*/
animation: run 1s steps(12) infinite,move 5s linear forwards;