空間位移
空間：是從坐標軸角度定義的窍荧。 x 灿椅、y 和z三條坐標軸構(gòu)成了一個立體空間浸间，z軸位置與視線方向相同太雨。
l 空間轉(zhuǎn)換也叫3D轉(zhuǎn)換
l 屬性：transform
語法
l transform: translate3d(x, y, z);
l transform: translateX(值);
l transform: translateY(值);
l transform: translateZ(值);
l 取值（正負均可）
l 像素單位數(shù)值
l 百分比
透視
屬性（添加給父級）
? perspective: 值;
? 取值：像素單位數(shù)值， 數(shù)值一般在800 – 1200魁蒜。
l 作用
? 空間轉(zhuǎn)換時囊扳，為元素添加近大遠小、近實遠虛的視覺效果
屬性（添加給父級）
? perspective: 值;
? 透視距離也稱為視距兜看，所謂的視距就是人的眼睛到屏幕的距離锥咸。
空間旋轉(zhuǎn)
? transform: rotateZ(值);
? transform: rotateX(值);
? transform: rotateY(值);
左手法則
? 判斷旋轉(zhuǎn)方向: 左手握住旋轉(zhuǎn)軸, 拇指指向正值方向, 手指彎曲方向為旋轉(zhuǎn)正值方向
拓展
? rotate3d(x, y, z, 角度度數(shù)) ：用來設置自定義旋轉(zhuǎn)軸的位置及旋轉(zhuǎn)的角度
? x，y细移，z 取值為0-1之間的數(shù)字
立體呈現(xiàn)
實現(xiàn)方法
? 添加 transform-style: preserve-3d;
? 使子元素處于真正的3d空間
l 呈現(xiàn)立體圖形步驟
- 盒子父元素添加transform-style: preserve-3d搏予；
- 按需求設置子盒子的位置（位移或旋轉(zhuǎn)）
l 注意
? 空間內(nèi)，轉(zhuǎn)換元素都有自已獨立的坐標軸弧轧，互不干擾
空間縮放
語法
? transform: scaleX(倍數(shù));
? transform: scaleY(倍數(shù));
? transform: scaleZ(倍數(shù));
? transform: scale3d(x, y, z)
動畫
動畫屬性
屬性 作用 取值
animation-name 動畫名稱
animation-duration 動畫時長
animation-delay 延遲時間
animation-fill-mode 動畫執(zhí)行完畢時狀態(tài) forwards：最后一幀狀態(tài)
backwards：第一幀狀態(tài)
animation-timing-function 速度曲線 steps(數(shù)字)：逐幀動畫
animation-iteration-count 重復次數(shù) infinite為無限循環(huán)
animation-direction 動畫執(zhí)行方向 alternate為反向
animation-play-state 暫停動畫 paused為暫停雪侥，通常配合:hover使用
精靈動畫制作步驟
? 準備顯示區(qū)域
? 設置盒子尺寸是一張小圖的尺寸，背景圖為當前精靈圖
? 定義動畫
? 改變背景圖的位置（移動的距離就是精靈圖的寬度）
? 使用動畫
? 添加速度曲線steps(N)精绎，N與精靈圖上小圖個數(shù)相同
? 添加無限重復效果
