如何縮放和旋轉圓形搜索btn？

Question

我有四捨五入的提交btn，我想從一開始就縮放到80％，當我將它懸停時，我希望它縮放到100％並旋轉360度。這裏的代碼，我沒有任何運氣在網上找到任何答案。

header #searchbtn{ 
background: url(../img/roundedsearchbtn.png) no-repeat; 
border: 0; 
cursor: pointer; 
display: inline-block; 
float: right; 
height: 41px; 
filter: alpha(opacity=60); 
opacity: 0.60; 

-webkit-transition: all 0.3s linear; 
-moz-transition: all 0.3s linear; 
-o-transition: all 0.3s linear; 
transition: all 0.3s linear; 

overflow: hidden; 
text-indent: 100%; 
width: 41px; 

-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
-transform: scale(0.8); 
} 

header #searchbtn:hover, header #searchbtn:focus { 
filter: alpha(opacity=100); 
opacity: 1; 

-webkit-transform: rotate(360deg) scale(1); 
-moz-transform: rotate(360deg) scale(1); 
-ms-transform: rotate(360deg) scale(1); 
-o-transform: rotate(360deg) scale(1); 
-transform: rotate(360deg) scale(1); 
} 

Answer 1

這是你想要的嗎？ Fiddle

只需添加這些CSS規則：

button { 
    -webkit-transform: rotate(0) scale(.8,.8); 
    -moz-transform: rotate(0) scale(.8,.8); 
    transform: rotate(0) scale(.8,.8); 
} 

button:hover { 
    -webkit-transform: rotate(360deg) scale(1,1); 
    -moz-transform: rotate(360deg) scale(1,1); 
    transform: rotate(360deg) scale(1,1); 
}