CSS3鼠標(biāo)滑過圖片旋轉(zhuǎn)是一個(gè)很有趣的技巧,可以用于美化網(wǎng)站,也可以用于添加互動(dòng)性。
img:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
以上代碼在img:hover狀態(tài)下使用了CSS3的transform屬性,將圖片旋轉(zhuǎn)360度。
如果你想添加漸變過渡,可以將代碼改為:
img { -webkit-transition: -webkit-transform 1s ease-in-out; -moz-transition: -moz-transform 1s ease-in-out; -ms-transition: -ms-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; transition: transform 1s ease-in-out; } img:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
以上代碼添加了CSS3的transition屬性,使圖片旋轉(zhuǎn)時(shí)有漸變過渡效果。
這就是CSS3鼠標(biāo)滑過圖片旋轉(zhuǎn)的簡單實(shí)現(xiàn)方法,可以根據(jù)需要進(jìn)行修改和優(yōu)化,讓你的網(wǎng)站更加生動(dòng)和有趣。