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

这是我的部门

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

我需要背景图像旋转360度的鼠标在事件的动画。有人能帮我吗？谢谢。

这是您的请求：

---

您不能通过CSS（级别2,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);
}

---

旋转背景图像：仅使用CSS代码悬停

---

这会将div作为一个整体进行旋转。用户请求与我的结果有什么区别？div可能包含他不希望旋转的文本内容。在这种情况下，您需要将内容包装在一个

div

（或另一个标记）中，并以相反的方向旋转它，或者使用伪元素上绝对定位的背景覆盖div并旋转该伪元素。不完全是这样。文本应位于背景旋转的div内。更像这样（旋转子对象以取消父对象的旋转）。或者像这样（仅适用于FF）（以伪元素和旋转伪元素为背景）。或者像这样（背景是绝对定位的子元素，而不是伪元素）。

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

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