CSS 可以讓圖片往下旋轉(zhuǎn)的方法很簡單,只需要使用 transform 屬性和 rotate() 方法即可。
img { transform: rotate(45deg); }
其中,rotate() 方法的參數(shù)為旋轉(zhuǎn)角度,單位為度數(shù)。這里使用了 45 度的角度使圖片往下旋轉(zhuǎn)。
需要注意的是,旋轉(zhuǎn)中心默認(rèn)是圖片的中心點(diǎn),如果需要改變旋轉(zhuǎn)中心,可以使用 transform-origin 屬性。
img { transform: rotate(45deg); transform-origin: bottom center; }
上述代碼會(huì)將旋轉(zhuǎn)中心改為圖片底部的中心點(diǎn)。
除了使用 rotate() 方法,還可以使用 skew() 方法來實(shí)現(xiàn)圖片的傾斜效果。該方法同樣需要一個(gè)角度參數(shù)。
img { transform: skew(15deg); }
上述代碼會(huì)將圖片向右傾斜 15 度。
總之,CSS 提供了多種方法來實(shí)現(xiàn)圖片的效果,只需要靈活運(yùn)用即可。
上一篇css讓元素顯示最前
下一篇css讓幾張圖片逐漸消失