Animating a CSS transform with jQuery

Question

I'm trying to animate a div, and get it to rotate about the y-axis 180 degrees. When I call the following code I get a jQuery error:

$("#my_div").animate({
       "transform": "rotateY(180deg)",
       "-webkit-transform": "rotateY(180deg)",
       "-moz-transform": "rotateY(180deg)"
    }, 500, function() {
        // Callback stuff here
    });
});

It says "Uncaught TypeError: Cannot read property 'defaultView' of undefined" and says it's in the jQuery file itself... what am I doing wrong?

Answer 1

You can also predefine the rotation in a CSS class and use jQuery to add/remove the class:

CSS:

#my_div {
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.rotate {
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery:

$("#my_div").addClass('rotate');