在CSS中，形變（transform）是指通過(guò)一系列變換來(lái)改變?cè)氐男螤詈臀恢谩Ｐ巫儼ㄐD(zhuǎn)、縮放、平移等操作，可以讓網(wǎng)頁(yè)設(shè)計(jì)更加靈活多變。下面我們來(lái)看一些常見(jiàn)的形變操作及其代碼實(shí)現(xiàn)。

/* 旋轉(zhuǎn) */
transform: rotate(30deg); /* 順時(shí)針旋轉(zhuǎn)30度 */
transform: rotate(-45deg); /* 逆時(shí)針旋轉(zhuǎn)45度 */
/* 縮放 */
transform: scale(2); /* 放大2倍 */
transform: scale(0.5); /* 縮小一半 */
transform: scaleX(2); /* 水平放大2倍 */
transform: scaleY(0.5); /* 垂直縮小一半 */
/* 平移 */
transform: translateX(50px); /* 水平向右平移50像素 */
transform: translateY(-20px); /* 垂直向上平移20像素 */
transform: translate(50px, -20px); /* 同時(shí)進(jìn)行水平和垂直平移 */
/* 傾斜 */
transform: skewX(45deg); /* 水平傾斜45度 */
transform: skewY(-30deg); /* 垂直傾斜30度 */
transform: skew(45deg, -30deg); /* 同時(shí)進(jìn)行水平和垂直傾斜 */

使用形變可以為網(wǎng)頁(yè)增加更多的動(dòng)態(tài)效果，例如讓圖片旋轉(zhuǎn)顯示更多細(xì)節(jié)、縮放元素凸顯重點(diǎn)、平移突出設(shè)計(jì)元素等。希望大家在設(shè)計(jì)中能發(fā)揮創(chuàng)造力，發(fā)掘更多形變的可能性。