Doug Molineux Doug Molineux - 1 year ago 76
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

Answer Source

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)