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

【问题标题】：CSS3 background rotation animation in mouse hover鼠标悬停时的CSS3背景旋转动画
【发布时间】：2012-09-12 10:42:43
【问题描述】：

这是我的 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 度动画。有谁能够帮我？谢谢。

【问题讨论】：

标签： animation css background rotation css-transitions

【解决方案1】：

这是您的要求：

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

【讨论】：

这会旋转整个 div。
用户请求和我的结果有什么区别？
div 可能包含他不想旋转的文本内容。在这种情况下，您需要将内容包装在div（或另一个标签）中并以相反方向旋转它或使用绝对定位以覆盖div的伪元素的背景和而是旋转该伪元素。
不完全。文本应该在背景旋转的 div 内。更像这样dabblet.com/gist/3754605（旋转孩子以取消父母的旋转）。或者像这样（仅在 FF 中有效）dabblet.com/gist/3754578（具有伪元素和旋转伪元素的背景）。或者像这样dabblet.com/gist/3754586（具有绝对定位子元素而不是伪元素的背景）。

【解决方案2】：

您不能通过 CSS（2,3 级）方式旋转背景图像。因此，您唯一的选择是对该图像使用单独的元素，并将该元素作为一个整体进行旋转/动画处理。

但是您可以在CSS level 4 中执行此操作。

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案4】：

仅使用 CSS 代码在 :hover 上旋转背景图像。

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

【讨论】：