結(jié)果為

（b）縮放 scale（x，y）

x,y設(shè)置大于1 是放大，小于1 是縮小。

（c）旋轉(zhuǎn) rotate(x deg)

x指定度數(shù)值，正數(shù)是順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)是逆時(shí)針旋轉(zhuǎn)。

旋轉(zhuǎn)可以使用 transform-origin 指定旋轉(zhuǎn)中心點(diǎn)，transform-origin 給left top right bottom 也可以指定具體的像素值。

（d）傾斜 skew（x deg ,y deg）

x,y分別指定傾斜在x，y方向上的角度，可以為負(fù)數(shù)。y值不寫默認(rèn)為0。

（2）3D變形

（a）旋轉(zhuǎn)（rotateX,rotateY,rotateZ）

3D旋轉(zhuǎn)與2D類似，只不過一個(gè)是基于二位坐標(biāo)一個(gè)是基于三維坐標(biāo)。三個(gè)值可以同時(shí)指定也可以單獨(dú)指定。

（b）移動(dòng)（translateX，translateY，translateZ）

3D移動(dòng)對于xy方向上的移動(dòng)與2d移動(dòng)一致。只有z方向上的移動(dòng)不一樣。Z方向上的移動(dòng)在現(xiàn)實(shí)生活中是距離變遠(yuǎn)，距離變近。因此在網(wǎng)頁中顯示結(jié)果是變近則變大，變遠(yuǎn)則變小。

要使Z放線上移動(dòng)生效首先要設(shè)置perspective（眼睛距離屏幕的距離）;

3、動(dòng)畫 animation

（1）、 animation: animation-name || animation-duration||  animation-timing-function || animation-delay || animation-iteration-count||  animation-direction||  animation-fill-mode;

animation-name:動(dòng)畫名稱（自己使用@keyframes 定義的動(dòng)畫）

animation-duration：持續(xù)時(shí)間

animation-timing-function：運(yùn)動(dòng)曲線，與過渡的運(yùn)動(dòng)曲線類似。

animation-delay：延遲時(shí)間

animation-iteration-count：循環(huán)次數(shù) （infinite 是無限循環(huán)）

animation-direction：是否反向（動(dòng)畫是否是由結(jié)尾倒開是倒著放的）

animation-fill-mode：設(shè)置在動(dòng)畫播放之外的狀態(tài)（結(jié)束時(shí)的狀態(tài)）none | forwards（設(shè)為結(jié)束時(shí)的狀態(tài)）| backwards(設(shè)為開始時(shí)的狀態(tài))|both（設(shè)為開始或結(jié)束時(shí)的狀態(tài)）

animation-play-state：設(shè)置動(dòng)畫狀態(tài) running 開始|paused 暫停

（2）、@keyframes 自定義動(dòng)畫

格式如下

@keyframes 動(dòng)畫名稱 {
from{ 開始} 0%
to{ 結(jié)束 } 100%
}

可以用 from...to 來指定動(dòng)畫過程，也可以用0%~100%指定動(dòng)畫過程。

上述就是小編為大家分享的使用CSS怎么實(shí)現(xiàn)變形、過渡與動(dòng)畫了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。