Doug Molineux Doug Molineux - 8 months ago 56
Javascript Question

Transform in jQuery

I'm trying to get an element to animate a rotation hover effect using jquery, I have this jsFiddle going to test. So Far I have this:

$(".icon").hover(function() {
$(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400);
},function() {
$(this).stop().animate({backgroundColor : "black", color: "red"},400);

But it doesn't seem to be rotating it at all, I realize the proper way to set the css is:

-webkit-transform: rotate(30deg);

I've tried this:

$(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400);

but then even the Height doesn't change. any advice would help thanks!

Link to the JSFiddle


Use the excellent jQuery Rotate plugin. It is supported by all major browsers

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome 

To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

To animate rotation, you can use setTmeout ex:

setTimeout(function() { $('#myImage').rotate(30) },5)