jquery animate a rotating div

Question

I would like to rotate a div in an animate function such as

 $(\'div\').animate({rotate: \'30deg\'},1000);

I have found this:

http

Answer 1

QTransform allows you to rotate, skew, scale and translate and it works cross browser.

Download and inlcude the QTransform.js to your html.

Provide a fixed height-width to your div(s) and add the following script:

$('#box4').delay(300).animate({rotate: '20deg'}, 500);
$('#box5').delay(700).animate({rotate: '50deg'}, 500);
$('#box6').delay(1200).animate({rotate: '80deg'}, 500);

where (box4, box5 & box6 are my div id's).

The delay(300), delay(700) & delay(1200) starts the animation after 300, 500 and 1200 milliseconds. And the 500 at the end is the duration for the animation.

If you want to manually provide the rotation angle you can do like this:

Take the angle in variable. e.g.

var degAngle = 60;

and add it to the script like

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);

You can also provide the multiple effects like scale along with rotation. E.g.,

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);

Why QTransform?

Till date jQuery doesn't support CSS3 animations. This plugin can help you to accomplish your target.

Hope this works for you.