用css悬停旋转圆圈

Question

我创建了一个简单的网站:

所以在图像上方有一个圆圈,我试图在悬停时旋转它,但它根本不起作用!继承我的代码!

<div class="image" id="landkreis">
<img src="reg.png" alt="" width="100%" height="auto" />
<span id="motha2">
<h6><br>Here<br>i am</h6>
</span>
</div>

h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';}

#motha2 {
position: absolute; 
top: 1px; 
left: 15%; 
width: 300px;
height:300px;
border-radius: 150px; 
background-color:#4ec461 ; } 

h6:hover {transform:rotate(-90deg);}

UPDATEUPDATE !!!!!!!!!!!!!!!!!!!!!!!!!!

好的过渡是有效的,但是如何使孔过渡平滑,并且为了检测它首先旋转-15deg然后到15deg并最终停在0deg？

Answer 1

如果你需要"旋转-15deg然后到15deg并最终停在0deg"

你必须改变

h6:hover {transform:rotate(-90deg);}

至

h6:hover {
    -moz-animation-name: rotate 1s linear 1;
    -webkit-animation-name: rotate 1s linear 1;
    animation-name: rotate 1s linear 1;
}
@-moz-keyframes rotate {
    0%, 100% {-moz-transform: rotate(0deg);}
    33% {-moz-transform: rotate(15deg);}
    66% {-moz-transform: rotate(-15deg);}
}
@-webkit-keyframes rotate {
    0%, 100% {-webkit-transform: rotate(0deg);}
    33% {-webkit-transform: rotate(15deg);}
    66% {-webkit-transform: rotate(-15deg);}
}
@keyframes rotate {
    0%, 100% {transform: rotate(0deg);}
    33% {transform: rotate(15deg);}
    66% {transform: rotate(-15deg);}
}