Transition not running on rotated element in CSS3

I have the following class:

.rotate
{
  -webkit-transition: all 2s ease-in-out;
  -webkit-transform : rotateY(360deg);
}

which I apply when a function is called by doing:

 $('#mydiv').addClass('rotate');

If I change 360deg to 180deg, I seem my div rotated but this is done instantaneously and not over a 2 second period. So it appears that the transition is not being applied at all but the transform is.

Any ideas?

TIA

JD

More Information:

Clearly works with a click (thanks to others below this is confirmed).

What I have is a plugin (not mine) which allows the users to put in their animations at the start of calling the plugin. The plugin stores a list of div elements in an array and then cycle through them every 5 secs and inserts each one in the DOM tree (and then removes the existing one). So when the first div is added, I expected the transition to run. Using the plugin is as follows:

      $.jqTests.start({ cyclespeed : 5secs;
                        transitionanimationin : 
                           function(element) {
                           element.removeClass('non-active'); 
                           // display : none is removed.
                           element.addClass('rotate');}
                     });

I found that if I 开发者_如何学Gouse css3 animations (with keyframes), the animation is played correctly. But I cannot seem to get the transition working using transforms.

-webkit-transition-duration: 2s;

Try that within the CS3, that styling should be for the HTML styling.