3D變換

左手座標系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。
這樣我們就建立了一個左手座標系，拇指、食指和中指分別代表X、Y、Z 軸的正方
向。

CSS 的 中的 3D 座標系

CSS3 中的 3D 座標系與上述的 3D 座標系是有一定區別的，相當於其繞著 X
軸旋轉了 180 度

transform

旋轉rotate

單位deg

X軸旋轉 rotateX()

Y軸旋轉 rotateY()

Z軸旋轉 rotateZ()

注意：在沿某軸進行旋轉的時候，會改變其他兩個軸的方向。

位移translate

X軸位移 translateX()

Y軸位移 translateY()

Z軸位移 translateZ()

扭曲skew

單位deg

skew()

X軸方向傾斜 skewX()

Y軸方向傾斜 skewY()

縮放scale

scale()

X軸方向放大/縮小 scaleX()

Y軸方向放大/縮小 scaleY()

Z軸方向放大/縮小 scaleZ()

透視perspective

在CSS3中有一個屬效能讓我們以透視的方式去觀察元素，perspective是用在透視元素的父元素上，也就是說一個元素具有perspective屬性，其子元素就會獲得透視效果

沒有透視效果的子元素

具有透視效果的子元素

在父元素的基礎上加了perspective

3D呈現transform-style

transform-style屬性是3D空間中一個重要的屬性，指定巢狀元素如何在3D空間中呈現!

transform-style：flat|preserve-3d；

flat值為預設值，表示所有子元素在2D平面呈現。

preserve-3d表示所有子元素在3D空間中呈現。

注意：transform-style屬性需要設定在父元素中。

拓展：backface-visibility

設定元素背面是否可見

動畫animation

animation：動畫名稱 動畫執行一次的時間 速度 動畫是否永遠執行 動畫延遲時間 動畫執行的順序 動畫執行的次數

動畫屬性

animation-name

設定動畫序列名稱

animation-duration

屬性定義動畫是從何時開始播放，及動畫應用在元素開始的這段時間的長度。預設值0s，表示動畫在該元素上後立即開始執行。該值以秒（s）或者毫秒（ms）為單位。

animation-delay

動畫延時時間

animation-timing-function

動畫執行速度

配置引數值

ease，ease-in，ease-out，ease-in-out，linear

animation-play-state

定義動畫播放狀態

running 動畫正常播放

paused 動畫暫停播放

animation-direction

表示動畫是否反向播放

normal 正序播放

reverse 倒序播放

alternate 交替播放

alternate-reverse 反向交替播放

animation-fill-mode

指給定動畫播放前後應用元素的樣式

none 動畫執行前後不改變任何樣式

forwards 保持目標動畫最後一幀的樣式

backwards 保持目標動畫第一幀的樣式

both 動畫將會執行forwards和backwards執行的動作

animation-iteration-count

定義動畫播放次數。

steps(60)

表示動畫分成 60 步完成引數值的順序：

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意

必要元素：

a、通過@keyframes 指定動畫序列；
b、通過百分比將動畫序列分割成多個節點；
c、在各節點中分別定義各屬性
d、通過 animation 將動畫應用於相應元素；

動畫的序列化/動畫的實現

@keyframes 動畫名稱{

​ 動畫的分隔符from{} to{}

​ 百分比形式分割動畫：每個節點可定義不同屬性。

}