I'm trying to rotate an image 45 degree (well actually I really want to make it wiggle back and forth) when I hover over. I tried using CSS with the transform rotate with no luck. Does anyone have any ideas (jQuery, javascript maybe)?

  a:hover{
            behavior:url(-ms-transform.htc);
            /* Firefox */
            -moz-transform:rotate(45deg);
            /* Safari and Chrome */
            -webkit-transform:rotate(45deg);
            /* Opera */
            -o-transform:rotate(45deg);
            /* IE9 */
            -ms-transform:rotate(45deg);
            /* IE6,IE7 */}

 <div id="main">
    <span class="box"><a href=""><img src="blog-icon.png"></img></a></span>
 </div>

I'm trying to rotate an image 45 degree (well actually I really want to make it wiggle back and forth) when I hover over. I tried using CSS with the transform rotate with no luck. Does anyone have any ideas (jQuery, javascript maybe)?

  a:hover{
            behavior:url(-ms-transform.htc);
            /* Firefox */
            -moz-transform:rotate(45deg);
            /* Safari and Chrome */
            -webkit-transform:rotate(45deg);
            /* Opera */
            -o-transform:rotate(45deg);
            /* IE9 */
            -ms-transform:rotate(45deg);
            /* IE6,IE7 */}

 <div id="main">
    <span class="box"><a href=""><img src="blog-icon.png"></img></a></span>
 </div>

• javascript
• jquery
• html
• css
• rotation

Share Improve this question Follow asked Nov 15, 2012 at 7:16 John VerberJohn Verber 75522 gold badges1616 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You seem to be setting the hover to the anchor instead of image..

Instead of

a:hover{

should be

img:hover{

Check Fiddle

In webkit browsers,transform is ignored on inline elements.

To make this work you would need to add a { display:block; } to your css. (Inline-block will also work)

Demo: http://jsfiddle/6Df6W/

Try This:

$("a img").rotate({ 
   bind: 
     { 
        mouseover : function() { 
            $(this).rotate({animateTo:45})
        },
        mouseout : function() { 
            $(this).rotate({animateTo:0})
        }
     } 

});​

I've used this several times and it works well:

http://code.google./p/jqueryrotate/

$(".box a img").rotate(45);