Franz Enzenhofer has created a nice new webkitTransform plugin that helps you manage transforms and state.

Franz tells us more:

With jQuery.css you can’t easily change the webkitTransform CSS because webkitTransform is not your average CSS.

If in one step you add .css('-webkit-transform', "rotate(20deg)") and in the next step .css('-webkit-transform', "scale(2.0)") the rotate value gets reset, as you have rewritten the complete -webkit-transform CSS value.

You could use the WebKitCSSMatrix javascript element, but it’s currently buggy, not consistently implemented and a pain to use.

Additionally you can’t just retrieve the ‘-webkit-transform’ css with .css(‘-webkit-transform’) as this just gives a matrix code.

Our goal with webkitTransform() was to fix this problem. With it, every element you assign webkit-transform css with can be edited in a simple way, without resetting every other -webkit-transform values.

Regarding the apparent difficulty of handling CSS transforms in DOM, it will almost always make more sense to just switch classNames instead. Every week or two something comes along like this where difficulty may be high but utility is so low as to make the solution questionable at best. Obviously changing transforms in the DOM has the utility of doing so explicitly on a preview (as this demonstrates), but apart from editing user content where there is no access to CSS files and the changes haven’t yet been committed, there is scarcely reason to ever do this.

hansschmucker,

RotateX and rotateY rotate on different axes (rotate is on axis Z). With a flat element, of course it does look like scaleX and scaleY (except that it flips the element after a certain point rather than ending at zero width), but with hypothetical three dimensional elements, it would allow free rotation in three dimensional space.

Ah, very nice. I released a similar patch in Aug 2009 because I was also annoyed with the fact that all your transform functions are packed into a single property and they tend to blow each other away. My plugin also patches rotate and scale so they can be animated independently with jQuery.animate().