CSS3中,我們可以使用transform屬性實現圖片的旋轉。而通過:hover選擇器,我們又可以在鼠標浮入時觸發旋轉效果。
img{ transition: transform .5s; } img:hover{ transform: rotate(360deg); }
在上面的代碼中,我們給圖片設置了一個0.5秒的過渡效果。這意味著圖片的旋轉過程會比較平滑。而在:hover選擇器中,我們使用了rotate()函數,將圖片旋轉了360度。
此外,我們還可以對旋轉中心點進行設置。默認情況下,旋轉的中心點是圖片的中心點,但我們可以通過transform-origin屬性來實現自定義的中心點。
img{ transition: transform .5s; transform-origin: bottom right; } img:hover{ transform: rotate(360deg); }
在上面的代碼中,我們將旋轉中心點設置為圖片的右下角。
在實際使用中,我們也可以將圖片的其他屬性一起設置,比如縮放、透明度等。這樣可以使我們的效果更加豐富多彩。
總之,通過CSS3中的transform屬性和:hover選擇器,我們可以輕松實現圖片的旋轉效果,為網站增添動態和生氣。