站長(zhǎng)資訊網(wǎng)
在css中，可以使用“:hover”偽類選擇器和transform屬性實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)的效果，語(yǔ)法為“圖片元素:hover{transform:rotateZ(旋轉(zhuǎn)角度);}”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css怎么讓鼠標(biāo)滑過(guò)圖片旋轉(zhuǎn)
在css中可以通過(guò)transform屬性旋轉(zhuǎn)div元素，transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
表格中的數(shù)字注明了完全支持該屬性的首個(gè)瀏覽器版本。
帶 -webkit-、-moz- 或 -ms- 的數(shù)字表示使用前綴的首個(gè)版本。
下面我們通過(guò)示例來(lái)看一下怎樣是鼠標(biāo)滑過(guò)，圖片旋轉(zhuǎn)，示例如下：
<html> <head> <style> body { background:#ddd; } .keleyi { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("1013.01.png") left top; -webkit-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; border-radius: 110px; -webkit-transition: -webkit-transform 2s ease-out; } .keleyi:hover { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } </style> </head> <body> <div class="keleyi"></div> </body> </html>
上述示例中使用chrome瀏覽器因此使用了-webkit-前綴。
輸出結(jié)果：
當(dāng)鼠標(biāo)滑過(guò)之后，會(huì)發(fā)生旋轉(zhuǎn)：
