CSS3 中,我們可以通過 transform 屬性來實現(xiàn)元素的旋轉(zhuǎn)、平移、縮放等操作,其中最常用的是旋轉(zhuǎn)操作。
/* 通過 transform 中的 rotate 屬性,設(shè)置元素的旋轉(zhuǎn)角度 */ .rotate { transform: rotate(45deg); }
上述代碼中,我們定義了一個名為 .rotate 的樣式,將其 transform 屬性中的 rotate 屬性設(shè)置為 45 度。這意味著,該元素會順時針旋轉(zhuǎn) 45 度。
除了正數(shù)之外,我們還可以通過設(shè)置負數(shù)的值來實現(xiàn)逆時針旋轉(zhuǎn)的效果:
/* 逆時針旋轉(zhuǎn) 45 度 */ .rotate { transform: rotate(-45deg); }
此外,我們還可以通過設(shè)置超過 360 度的值,來實現(xiàn)多圈旋轉(zhuǎn)的效果。
/* 旋轉(zhuǎn) 720 度 */ .rotate { transform: rotate(720deg); }
不過,需要注意的是,不是所有瀏覽器都支持超過 360 度的旋轉(zhuǎn)效果。因此,在實際開發(fā)中,盡量不要使用這種技巧。