滑鼠上移表徵圖旋轉效果在企業的項目中經常會使用到，特別是頂部導覽列，比如：
接下來就是要使用css實現滑鼠上移表徵圖旋轉效果。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p,img,body{ margin: 0; padding: 0; } .box{ height: 150px; width:300px; background: #1b7b80; margin: 0 auto; padding: 20px; } .box:hover img{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } img{ margin: 0 auto; display: block; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } </style> </head> <body> <p class="box"> <img src="img/down.png" alt=""/> </p> </body> </html>
這裡放了一個盒子，盒子中放了一個圖片，為了能看得更加清晰，這裡放一個比較大的圖片。現在要實現的效果是，滑鼠移到.box的盒子上時，表徵圖img將會做一個180度的旋轉。
style中，關鍵是img和.box:hover img的設定，首先我們需要先給img設定transition屬性，這裡的屬性指定了動畫的方式和持續時間長度。然後給.box設定當滑鼠上移時:hover時img的動作為旋轉180度：
transform: rotate(180deg);
下方的如-webkit-的設定主要為了相容各廠商的瀏覽器而設定的。
得到的效果如所示：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
