一，空間轉換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;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458234.html

標籤：Html/Css

上一篇：js中定義變數var 與 let的區別

下一篇：JavaScript知識總結 ES6篇