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);
}

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

1 个答案: