站長(zhǎng)資訊網(wǎng)
在css中，可以利用“:hover”偽類選擇器和transform屬性實(shí)現(xiàn)鼠標(biāo)懸停元素逆時(shí)針旋轉(zhuǎn)效果，語法為“元素:hover{transform:rotateZ(旋轉(zhuǎn)角度);}”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css怎么實(shí)現(xiàn)鼠標(biāo)懸停元素逆時(shí)針旋轉(zhuǎn)效果
在css中可以利用“:hover”偽類選擇器和transform屬性實(shí)現(xiàn)鼠標(biāo)滑過圖片逆時(shí)針旋轉(zhuǎn)的效果。transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
下面我們通過示例來看一下，示例如下：
<html> <head> <style> .keleyi { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("1118.02.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>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
