transform rotate issue on multiply of PI

[albanx]

First of all you guys have done really a great works with these hooks, I was going to create mine but after I googled I found this.

There is a problem with the rotate transform proprety. It seems that it supports only a range from 0 to PI of gradiant rotation. For example if I want to rotate a box 2 times in a jquery animation, I notice it is not possible. I hope was clear (but I think not) what I mean. Although this is really a great work. Alban

[louisremi]

Hi albanx, Sorry, to make this more clear you'll have to create a test case: a page where I can see what your problem exactly is. The easiest way to do that is to use http://jsfiddle.net

[albanx]

Yes, here it is: http://jsfiddle.net/QZ7Sm/5/, look at the end of JS part there is the test code . While the code in the example will not produce the desired effect, inverting the animation proprieties will make the wanted effects: This wont work: $('#test').css({'transform':'rotate('+(4*Math.PI)+')'}).animate({'transform': 'rotate(0)'}); //no effect but this will work $('#test').css({'transform':'rotate(0)'}).animate({'transform': 'rotate('+(4*Math.PI)+')'});

But maybe it is not an issue at all, or I am wrong? (sorry i really do not know how to format js code on github comments)

[louisremi]

Hi albanx, The script doesn't keep track of the state of your elements. if an element has been rotated by a multiple of 360° or 2PI, it's just like it has not been rotated at all. If you then animate it to 0, nothing will happen. If you want to make sure that your element is going to rotate and have the ability to control the direction, use relative animations:

// clockwise rotation
$(elem).animate({transform: "+=rotate(360deg)");
// anti-clockwise rotation
$(elem).animate({transform: "+=rotate(-360deg)");