一.3D 轉換

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

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

3.左手法則
左手握住旋轉軸,豎起拇指指向旋轉軸正方向,正向就是其餘手指捲曲的方向.
4. 透視(perspective)
透視可以將一個 2D 平面,在轉換的過程當中,呈現 3D 效果.作為一個屬性,設定給父元素,作用於所有 3D 轉換的子元素.
5. 3D呈現(transform-style)

:flat:所有子元素在 2D平面呈現 preserve-3d;保留 3D 空間.

二.動畫

1.必要元素:a.通過@keyframes 指定動畫序列; b.通過百分比將動畫序列分割成多個節點; c.在各節點中分別定義各屬性 ;d.通過 animation將動畫應用於相應元素.
2.書寫格式:animation:動畫名稱 動畫執行一次的時間 動畫執行的速度 動畫是否永久執行(infinite持續永久執行) 動畫的延遲時間 動畫執行的順序(alternate相反屬性值) 動畫執行的次數
3.動畫的序列化
@keyframes 動畫名稱{
(1)from{} to{}
(2)通過百分比將動畫分成多個節點
}
4.動畫屬性詳解

:
animation-name:動畫名稱
animation-duration:設定動畫執行一次的時間
animation-delay:動畫延遲執行的時間
animation-direction:動畫執行方向alternate等
animation-iteration-count:動畫執行次數,inifinate 等
animation-timing-function:動畫執行速度,linear,ease 等
animation-play-state:動畫播放狀態,running設定動畫開始執行,paused設定動畫暫停/不執行等
animation-fill-mode:動畫執行結束時保持的狀態,forwards設定動畫執行結束時保持執行前的狀態,backwards設定動畫執行結束時保持結束(執行後)的狀態等
steps(60) 幀動畫:表示動畫分成 60 步完成.
引數值的順序: 關於幾個值,除了名字,動畫時間,延時有嚴格順序要求其它隨意.