CSS中可以使用transform來(lái)旋轉(zhuǎn)圖片樣式,其中旋轉(zhuǎn)90度可以使用rotate()函數(shù)來(lái)實(shí)現(xiàn)。
.rotate90 { transform: rotate(90deg); }
上面的代碼中,.rotate90是一個(gè)class名稱,可以通過(guò)給需要旋轉(zhuǎn)的圖片添加該class來(lái)實(shí)現(xiàn)旋轉(zhuǎn)效果。
同時(shí),也可以使用多個(gè)transform屬性來(lái)實(shí)現(xiàn)旋轉(zhuǎn)和其他變換的組合效果,例如:
.rotate90-flip { transform: rotate(90deg) scaleX(-1); }
上面的代碼中,除了旋轉(zhuǎn)90度以外,還添加了一個(gè)水平翻轉(zhuǎn)的效果,實(shí)現(xiàn)了圖片順時(shí)針旋轉(zhuǎn)90度并翻轉(zhuǎn)的效果。
除了2D旋轉(zhuǎn)外,CSS還支持3D旋轉(zhuǎn),可以通過(guò)rotateX()、rotateY()和rotateZ()函數(shù)來(lái)實(shí)現(xiàn),例如:
.rotate3d { transform: rotateY(180deg); }
上面的代碼實(shí)現(xiàn)了一個(gè)基于Y軸的180度旋轉(zhuǎn),即將圖片翻轉(zhuǎn)至背面。
總之,在CSS中使用transform的旋轉(zhuǎn)功能可以讓我們輕松實(shí)現(xiàn)各種炫酷的圖片效果,為我們的網(wǎng)頁(yè)增添生動(dòng)活潑的元素。