用CSS hover旋转圆形

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

更新更新！！！！！！！！！！！

好的，过渡效果可以实现，但是如何使整个过渡更加平滑呢？例如，先旋转-15度，然后再旋转到15度，最后停止在0度？

- Em Sta

---

你在特定的浏览器中测试吗？还是所有浏览器都要测试？ - Tanner

哇，这么多答案都差不多啊… - Mr. Alien

你可以使用延迟转换（从一个状态过渡到相同的状态基本上是一种延迟）来工作。 - kleinfreund

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations 是关于使用CSS动画的指南。 - Kilian Stinson

Answer 1

如果您需要“旋转-15度，然后到15度，最后停止在0度”

您需要更改：

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

- Sivan

---

抱歉，但是没有起作用！ - Em Sta

如果它没起作用，那你为什么接受了呢？ - Madara's Ghost

Answer 2

你有尝试使用前缀吗？

对于新的CSS属性，浏览器的实现有时会略有不同。这就是为什么不同的浏览器引擎使用了几个前缀的原因。

h6:hover {
    -webkit-transform: rotate(-90deg);
    -moz-transform:    rotate(-90deg);
    -ms-transform:     rotate(-90deg);
    -o-transform:      rotate(-90deg);
    transform :        rotate(-90deg);
}

更多信息请参见caniuse.com。

- Kilian Stinson

Answer 3

演示

CSS：

div{
    border-radius:50%;
    width:200px;
    height:100px;
    background-color:green;
    text-align:center;
}
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }  

.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

- Aravind30790

Answer 4

#motha2:hover {
position: absolute; 
top: 1px; 
left: 15%; 
width: 300px;
height:300px;
border-radius: 150px; 
background-color:#4ec461 ; 
-webkit-transform: rotate(7deg);
-moz-transform:    rotate(7deg);
-ms-transform:     rotate(7deg);
-o-transform:      rotate(7deg);
transform :        rotate(7deg);
} 

请尝试这个 http://jsfiddle.net/VbZCX/。

- copypaste

Answer 5

以下是工作中的演示http://jsfiddle.net/4wLpE/1/，但在这个例子中它不会持续旋转。如果您想要这样做，请告诉我。

• 移除h6:hover

• 添加

  #motha2:hover { 
    cursor:pointer;
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
  }
  

- spring

Answer 6

这里是适用于 Chrome 的工作示例：Chrome 测试

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

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

#motha2:hover {-webkit-transform:rotate(-90deg);}

对于其他浏览器：http://davidwalsh.name/css-transform-rotate

更流畅.... 在Chrome中测试

#motha2:hover {
  -webkit-animation-name: rotate; 
  -webkit-animation-duration: 2s; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes rotate {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(90deg);}
}

- maqjav

---

添加了如何使运动更加流畅的说明。 - maqjav

Answer 7

你的示例在我的firefox上运行良好，但可能是浏览器问题。你使用的浏览器非常依赖于你可以使用的css3代码。此外，使用浏览器前缀也可能有帮助。

看一下我的这个例子http://jsfiddle.net/yJH4W/1/，它似乎可以在大多数现代浏览器上工作。如果它不能为你工作，那可能是因为你正在使用不支持它的旧版浏览器。要查看你可以使用什么内容，请访问一个很好的网站caniuse.com。

h6:hover {
    -webkit-transform: rotate(-90deg);
-moz-transform:    rotate(-90deg);
-ms-transform:     rotate(-90deg);
transform :        rotate(-90deg);

}

- Dominic Green

Answer 8

h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
 -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf
}

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

h6:hover { -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf}

- Falguni Panchal

---

请解释你所做的。抛出一段代码几乎没有帮助（即使标记为已接受）。 - Madara's Ghost

Answer 9

我已经在按钮上尝试过了，也应该适用于图片..这就是你所需要的。 注意：此代码仅使用CSS和HTML来实现你想要的效果。

     input#round{
    width:100px; /*same as the height*/
    height:100px; /*same as the width*/
    background-color:#05B7FF;
    border:1px solid #05B7FF; /*same colour as the background*/
    color:#fff;
    font-size:1.6em;

    /*initial spin*/
       -moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
    /*set the border-radius at half the size of the width and height*/
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    /*give the button a small drop shadow*/
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);

    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;



display:inline-block; 

    }
    /***NOW STYLE THE BUTTON'S HOVER STATE***/
    input#round:hover{
    background:#007DC5;
    border:1px solid #007DC5;
    /*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);


    -moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
    }

它还有其他美丽的特性，如推动效果。值得一试。优雅。

注意：您可以编辑转换持续时间，然后进行另一个动画。这是您的决定。

- Ashish Sharma