鼠标悬停时的CSS3背景旋转动画

Question

这是我的 div。

   #div1{
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        margin-top: 420px;
        width:      158px;
        height:     158px;
        background-image:url(images/background.png);
    }

我需要在鼠标悬停时让背景图片旋转360度的动画效果。有人可以帮助我吗？谢谢。

- Sasindu Hewage

Answer 1

here is your request:

jsFiddle Demo

    <div id="div1">rterterrt
teteterrtetre<div id="div2">
</div></div>

.

 #div1{
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        /*margin-top: 420px;*/
        width:      158px;
        height:     158px;

}
#div2{


        /*margin-top: 420px;*/
        width:      158px;
        height:     158px;
        background-image:url(http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg);
}

#div2:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
​

- yossi

---

这会将整个 div 旋转。 - Sreenath S

用户请求和我的结果有什么区别？ - yossi

div 可能包含他不想旋转的文本内容。这种情况下，您需要将内容包装在 div（或其他标签）中，并以相反方向旋转它，或者使用伪元素上的背景，该伪元素绝对定位以覆盖 div 并旋转该伪元素。 - Ana

不太对。文本应该在具有背景旋转的 div 中。更像这个 http://dabblet.com/gist/3754605（旋转子元素以取消父元素的旋转）。或者像这样（仅适用于 FF）http://dabblet.com/gist/3754578（在伪元素上具有背景和旋转伪元素）。或者像这样 http://dabblet.com/gist/3754586（将背景放在绝对定位的子元素上，而不是伪元素上）。 - Ana

Answer 2

无法通过 CSS (2级，3级) 旋转背景图片。

因此，您唯一的选择是使用单独的元素并将整个元素作为一个整体进行旋转/动画。

但是在 CSS 4级 中，您将能够实现此操作。

- c-smile

Answer 3

你可以使用伪元素来实现这个功能。

#div1{
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        margin-top: 420px;
}
#div:before {
   content: "";
   position: absolute;
   width: 158px;
   height: 158px;
   background-image:url(images/background.png);
   transition: all 1s linear;
}

#div:hover:before {
    transform:rotate(360deg);
}

- Tatubolitex

Answer 4

使用纯CSS代码，在:hover时旋转背景图像。

http://designshack.net/tutorialexamples/multiplebackgrounds/index.html

- Chintan Patel