Css 如何缩放和旋转圆形搜索btn？

我已经四舍五入提交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);
}

这就是你想要的

只需添加以下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);
}

---

你能提供一把小提琴吗？非常感谢，这正是我想要的。@Cherniv谢谢！通常，为了避免冲突，您必须在CSS中保持一致。瓦托克斯我很高兴能帮助你！