transform 2d/3d 語法入口(轉(zhuǎn)化)
- 移動 translate 可以改變元素在頁面中的位置贞间，類似定位粹懒；
代碼連寫
- transform translate(100px),(100px) 括號里第一個是X軸,第二個是Y軸或者在后面加%
旋轉(zhuǎn)
- rotate
transform:rotate(45deg); 單位是deg(度), 正值順時針. 關(guān)鍵詞繞著
縮放
- scale
transform:scale(2,3) 使用場景: 鼠標(biāo)懸浮,按鈕放大 后面參數(shù)為倍數(shù)(無單位) 會受中心點的影響下面的子元素顷级、文字、屬性會被縮放； 中心點的代碼:transform-origin 默認(rèn)旋轉(zhuǎn)的基準(zhǔn)點是中心點
2D綜合寫法:
- 移動在旋轉(zhuǎn)前面 transform: translate(x,y) rotate(90deg) scale(x,y); 旋轉(zhuǎn)在前面:transform:rotate(90deg) translate(x,y) scale(x,y)
使用順序不同帽芽，出現(xiàn)的效果不同，因為旋轉(zhuǎn)會改變初始軸向导街，再次移動就會按照改變后的軸向進(jìn)行移動披泪；
animation
@keyframs donghua {
// 開始狀態(tài)
from {
transform: translateX(0px);
background-color:red;
}
// 結(jié)束狀態(tài)
to {
transform:translateX(1000px)
background-color:yellow;
}
}
div {
// 調(diào)用
animation-name:donghua;
// duration 持續(xù)時間
animation-duration: 3s;
}
@keyframs donghua {
0% {
}
50% {
}
// 結(jié)束狀態(tài)
100%{
}
}
/* 勻速 */
animation-timing-function: linear;
/* 慢-快-慢 默認(rèn)值 */
animation-timing-function: ease;
/* 慢-快 */
animation-timing-function: ease-in;
/* 快-慢 */
animation-timing-function: ease-out;
/* 慢-快-慢 */
animation-timing-function: ease-in-out;
animation-timing-function：steps(n) 分步 實現(xiàn) 老電影一幀一幀款票，整個動畫分為幾步驟完成
動畫簡寫：動畫名稱 持續(xù)時間 速度曲線 等待時間 執(zhí)行次數(shù) 執(zhí)行的方向 動畫等待或結(jié)束的狀態(tài)
animation: name duration(動畫完成一個周期所花費的時間) timing-function(速度曲線) delay(動畫何時開始) iteration-count(動畫播放的次數(shù)) direction(是否在下一期逆向播放) fill-mode(結(jié)束后的狀態(tài))
3d更2d比多出一個z軸面對我們的方向 寫在一起：tansform: translateX(100px) translateY(100px) translateZ(100px) 三個方向同時寫：transform: translate3d(100px,100px,100px);
- XY 方向可以設(shè)置px值和%（因為有寬高）；
- Z 軸只能設(shè)置 px泽论，不能設(shè)置%（原因是盒子沒有厚度）；
子元素做3D轉(zhuǎn)換翼悴，需在其父級上加transform-style屬性缚够，這樣子元素做的3D轉(zhuǎn)化才能為觀測到；
- transform-style: preserve-3d;
- 視距 perspective保證盒子的移動能被觀測到近大遠(yuǎn)小的效果鹦赎；產(chǎn)生透視感 perspective: 1000px;
