一、空間轉(zhuǎn)換 transform

目標(biāo)：使用transform屬性實(shí)現(xiàn)元素在空間內(nèi)的位移、旋轉(zhuǎn)、縮放等效果

• 空間：是從坐標(biāo)軸角度定義的。 x 、y 和z三條坐標(biāo)軸構(gòu)成了一個(gè)立體空間，z軸位置與視線方向相同；z軸正方面——屏幕正對(duì)人眼睛得方向。

1. 空間位移——translate
   transform: translate3d(x, y, z);
   transform: translateX(值);
   transform: translateY(值);
   transform: translateZ(值);
   取值可取像素或者百分比

要想看到空間Z軸得空間轉(zhuǎn)換效果，需要添加透視perspective屬性
透視，視距，景深 設(shè)置給使用了3d元素的父元素（親爸爸）
a.perspective給誰添加：設(shè)置給使用了3d元素最近一級(jí)的父元素
b.視距的理解：相當(dāng)于在給定的像素位置上設(shè)置一個(gè)眼睛，看盒子而已
c.空間轉(zhuǎn)換時(shí)，為元素添加近大遠(yuǎn)小、近實(shí)遠(yuǎn)虛的視覺效果
/* 添加視距 取值范圍：400~1200px pp */

2. 空間旋轉(zhuǎn)-rotate
   transform: rotateZ(值);
   transform: rotateX(值);
   transform: rotateY(值);

如何判斷圖片的旋轉(zhuǎn)方向——使用左手法則
左手法則判斷旋轉(zhuǎn)方向: 左手握住旋轉(zhuǎn)軸, 拇指指向正值方向, 手指彎曲方向?yàn)樾D(zhuǎn)正值方向

image.png

• transform-style: preserve-3d 和 perspective的對(duì)比
  a. 都是給父元素添加
  b. transform-style: preserve-3d是使子元素處于真正的3d空間，可以呈現(xiàn)出立體圖形；而perspective屬性只是給子元素提供了近大遠(yuǎn)小、近實(shí)遠(yuǎn)虛的視覺效果

二、動(dòng)畫

實(shí)現(xiàn)動(dòng)畫的步驟：

/* 1. 定義動(dòng)畫：讓寬度從200變大到600 */

@keyframes change {
  from {
    width: 200px;
  }
  to {
    width: 600px;
  }
}

/* 2.調(diào)用動(dòng)畫 第一個(gè)參數(shù)是你定義的動(dòng)畫名稱,第二個(gè)參數(shù)是動(dòng)畫時(shí)長(zhǎng)*/

  animation: change 2s;

使用動(dòng)畫注意點(diǎn)：
1.動(dòng)畫的名稱不能重復(fù)
2.可參與過渡的css屬性都可以參與動(dòng)畫
3.動(dòng)畫的名稱不能為 running 它是關(guān)鍵詞
4.如果調(diào)用該動(dòng)畫的盒子樣式和初始狀態(tài)的樣式是一樣的，初始狀態(tài)可以省略不寫

• 使用animation相關(guān)屬性控制動(dòng)畫執(zhí)行過程

  
  
  image.png
  • 調(diào)用動(dòng)畫
    延遲時(shí)間：動(dòng)畫開始之間要等待的時(shí)間 s/ms
    動(dòng)畫播放次數(shù)：infinite 無限次播放
    動(dòng)畫播放方向：alternate 交替播放
    速度曲線：默認(rèn) ease； 1. linear 勻速播放 2. steps(次數(shù))一般配合精靈圖使用
    執(zhí)行完畢時(shí)的狀態(tài)：forwards 動(dòng)畫會(huì)停在動(dòng)畫結(jié)束時(shí)的狀態(tài)；
    注意點(diǎn)：
    動(dòng)畫名稱和播放一次動(dòng)畫的時(shí)長(zhǎng)必須寫，其他屬性需要就寫
    forwards不能和infinite結(jié)合使用，否則不生效
    animation 里面屬性值 不分先后順序
    當(dāng)屬性值里有兩個(gè)時(shí)間，第一個(gè)時(shí)間永遠(yuǎn)表示動(dòng)畫時(shí)長(zhǎng)，第二個(gè)表示等待時(shí)間

補(bǔ)間動(dòng)畫：比較平滑的動(dòng)畫——用速度曲線linear
逐幀動(dòng)畫：配合精靈圖一幀幀跳動(dòng)的動(dòng)畫——只能用速度曲線step（）