就業(yè)班移動web第二天
一、空間轉(zhuǎn)換
通過transform屬性實現(xiàn)元素在空間內(nèi)的轉(zhuǎn)換，位移间聊、旋轉(zhuǎn)，縮放等效果抵拘。
空間轉(zhuǎn)換即為3d
1.空間位移
語法：transform: translate3d(x, y, z);值為正負哎榴，單位：像素和百分比
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);其中z軸 就是人眼直視方向！
2.透視
通過perspective屬性實現(xiàn)透視效果（近大遠小的效果）
語法：perspective：值 （值為透視距離僵蛛，視距就是人的眼睛到屏幕的距離）
取值：800-1200 單位為像素
設置給使用了3d元素的父元素（親爸爸）
3.空間轉(zhuǎn)換
通過rotate實現(xiàn)元素空間旋轉(zhuǎn)效果
語法：transform：rotate（x, y z）值為正負尚蝌，連寫屬性值與屬性值以空格隔開，單位：deg
可通過左手法則判斷旋轉(zhuǎn)方向: 左手握住旋轉(zhuǎn)軸, 拇指指向正值方向, 手指彎曲方向為旋轉(zhuǎn)正值方向
4.立體呈現(xiàn)
通過transform-style: preserve-3d呈現(xiàn)立體圖形
語法：transform-style: preserve-3d （盒子父元素添加）
preserve-3d 和透視的區(qū)別
perspective屬性：僅僅是增加了一個進大遠小的效果充尉，并沒有真正的開啟3d模式
二飘言、動畫
利用animation添加動畫效果
動畫效果分為補間動畫和逐幀動畫
animation步驟為定義動畫和使用動畫
a定義動畫
語法：
@keyframes 動畫名字 （不能用runing這個名字） {
form{需要設置效果 }或者百分比（初始狀態(tài)）
to{ 需要設置效果}或者百分比（結(jié)束狀態(tài)）
}
b使用動畫
在需要的標簽加上使用動畫
animation：設置的動畫名字 時間 （注意這兩個必寫）
一個標簽需要用多個動畫，用英文逗號隔開驼侠，寫上名字和時間及其他屬性
以下是常用的動畫效果屬性：
動畫播放次數(shù)：infinite 無限次播放
動畫播放方向：alternate 交替播放
速度曲線：默認 ease姿鸿； 1. linear 勻速播放 2. steps(次數(shù))一般配合精靈圖使用
執(zhí)行完畢時的狀態(tài)：forwards 動畫會停在動畫結(jié)束時的狀態(tài)；
animation 里面屬性值 不分先后順序
