CSS3 background rotation animation in mouse hover

Question

here is my div.

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

I need background image rotation animation by 360 degrees for mouse over event. Can anybody help me? thank you.

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

Solution 2

You cannot rotate background image by CSS (levels 2,3) means. So the only option for you is to use separate element with that image and rotate/animate that element as a whole.

But you will be able to do this in CSS level 4.

Comments

[Sreenath S]

this rotates the div as a whole.

[yossi]

what the difference from user request to my result ?

[Ana]

The div might have text content which he does not want rotated. In which case you need to either wrap the content in a div (or another tag) and rotate it in the opposite direction or use the background on pseudo-element that's absolutely positioned to cover the div and rotate that pseudo-element instead.

[Ana]

Not quite. The text should be inside the div that has the background rotated. More like this dabblet.com/gist/3754605 (rotate child to cancel parent's rotation). Or like this (works only in FF) dabblet.com/gist/3754578 (have background on pseudo-element & rotate pseudo-element). Or like this dabblet.com/gist/3754586 (have background on absolutely positioned child instead of pseudo-element).