CSS3有許多非常有趣的效果和特性,其中之一就是圖片繞中心旋轉。這項效果不僅僅很酷,而且還能夠給網站增加更多的動態、生動感。
實現圖片繞中心旋轉效果,需要使用CSS3中的transform屬性。該屬性可以對元素進行旋轉、縮放、偏移等操作。要實現圖片繞中心旋轉,需要使用如下代碼:
img{ transform: rotate(45deg); transform-origin: center; }
在上述代碼中,rotate(45deg)表示將圖片旋轉45度,而transform-origin: center則表示將圖片的中心點設置為旋轉軸心。
需要注意的是,transform屬性是CSS3新特性,兼容性并不是很好。所以,如果你想要你的網站在各大瀏覽器中都能夠正常運行,最好還是在使用該效果前做好性能測試和兼容性測試。
上一篇css3圖片飛入動畫教程
下一篇css li點大小