css如何讓鼠標滑過圖片旋轉

小編給大家分享一下css如何讓鼠標滑過圖片旋轉，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

公司主營業務：成都網站設計、成都網站制作、外貿網站建設、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。成都創新互聯是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創新互聯推出靖遠免費做網站回饋大家。

在css中，可以使用“:hover”偽類選擇器和transform屬性實現鼠標滑過圖片旋轉的效果，語法為“圖片元素:hover{transform:rotateZ(旋轉角度);}”。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中可以通過transform屬性旋轉div元素，transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit-、-moz- 或 -ms- 的數字表示使用前綴的首個版本。

css如何讓鼠標滑過圖片旋轉

下面我們通過示例來看一下怎樣是鼠標滑過，圖片旋轉，示例如下：

<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-前綴。

輸出結果：

css如何讓鼠標滑過圖片旋轉