要將圖標旋轉，只需使用transform的rotate以及transition即可完成旋轉的動畫效果。
ease 規定慢速開始，然后變快，然后慢速結束的過渡效果;
ease-in 規定以慢速開始的過渡效果;
ease-out 規定以慢速結束的過渡效果;
ease-in-out 規定以慢速開始和結束的過渡效果
li a i {
background: url(icon.png) no-repeat; display: block; width: 42px; height: 32px; position: relative; z-index: 10; float:left;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
完整：
<style>
ul { width: 145px; margin: 0 auto; list-style: none; font-size: 30px;background-color: #ffe184;}
li{padding:10px; background-color: #ff4d52; }
li a{width:145px;height:42px;line-height:36px;display:block;color:#333; background-color: #ffff00;}
li a:hover{text-decoration:none}
li a i { background: url(images/icon.png) no-repeat; display: block; width: 42px; height: 32px; position: relative; z-index: 10; float:left;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-ms-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
background-color: #003399;
}
li a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
li.female a i { background-position: 0 0; }
li.arrow a i { background-position: 0 -50px; }
</style>
<ul class="icos">
<li class="female"><a href="#"><i></i>女生</a></li>
<li class="arrow"><a href="#"><i></i>箭頭</a></li>
</ul>
