CSS3 曲線變換

transform: matrix(a, b, c, d, e, f);
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
transform: scale(x, y);
transform: scaleX(x);
transform: scaleY(y);
transform: rotate(angle);
transform: skew(x-angle, y-angle);
transform: skewX(angle);
transform: skewY(angle);

CSS3 曲線變換是一種可以改變?cè)匚恢谩⑿螤詈徒嵌鹊男录夹g(shù)，它是CSS的一部分，通過(guò)CSS3我們可以實(shí)現(xiàn)很多以前只能用JavaScript或者Flash實(shí)現(xiàn)的動(dòng)畫(huà)效果。

CSS3 曲線變換所用到的代碼較多，以下是CSS3曲線變換中常用的一些屬性：

matrix：定義2D變換。
translate：定義2D平移變換。
translateX：定義2D水平平移變換。
translateY：定義2D垂直平移變換。
scale：定義2D縮放變換。
scaleX：定義2D水平縮放變換。
scaleY：定義2D垂直縮放變換。
rotate：定義2D旋轉(zhuǎn)變換。
skew：定義2D傾斜變換。
skewX：定義2D水平傾斜變換。
skewY：定義2D垂直傾斜變換。

CSS3 曲線變換可以通過(guò)以上屬性來(lái)實(shí)現(xiàn)絕大部分動(dòng)畫(huà)效果，以下是一個(gè)實(shí)現(xiàn)跳躍效果的例子：

.jump {
transform: translateY(-30px);
animation: jump 1s ease-in-out infinite alternate;
}
@keyframes jump {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}

以上代碼會(huì)讓一個(gè)元素不斷地向上跳躍。

CSS3 曲線變換已經(jīng)被大量應(yīng)用于實(shí)際開(kāi)發(fā)中，它不僅能夠讓網(wǎng)頁(yè)變得更加酷炫，同時(shí)也能夠提升用戶體驗(yàn)并帶來(lái)更好的視覺(jué)效果。