CSS2有一個(gè)特性可以讓我們輕松地實(shí)現(xiàn)圖片旋轉(zhuǎn),即transform屬性。
transform屬性是CSS2中的一個(gè)非常強(qiáng)大的屬性,在它的支持下,我們可以通過一些簡單的CSS代碼來實(shí)現(xiàn)圖片的旋轉(zhuǎn)、縮放、平移等效果。
在使用transform屬性進(jìn)行圖片旋轉(zhuǎn)時(shí),需要在CSS樣式中指定以下代碼:
img { transform: rotate(45deg); }
其中,rotate()是實(shí)現(xiàn)旋轉(zhuǎn)效果的函數(shù)。值得注意的是,這里的旋轉(zhuǎn)角度是以順時(shí)針方向?yàn)檎较虻模D(zhuǎn)角度的單位是度(deg)。
除了rotate()函數(shù)之外,transform屬性還支持其他一些函數(shù)來實(shí)現(xiàn)不同的效果。比如,scale()函數(shù)可以實(shí)現(xiàn)圖片的縮放效果:
img { transform: scale(2); }
上面的代碼會(huì)將圖片放大兩倍。如果需要縮小圖片,只需要將scale()函數(shù)的參數(shù)設(shè)置為小于1的數(shù)值即可。
總之,使用CSS2的transform屬性可以幫助我們實(shí)現(xiàn)各種令人驚嘆的效果。如果你還沒有嘗試過CSS2中的transform屬性,不妨試試看,并發(fā)揮出自己的創(chuàng)意。