Patching jQuery css() Method to Support 'transform'
- published:
- 2009.02.22
- topics:
- css
- javascript
I thought it might be nice if jQuery's css() method would internally reconcile browser differences with CSS Transforms just like it reconciles differences with for example the opacity property. I am currently supporting CSS Transforms in WebKit/Safari/Chrome, Firefox 3.5+, IE9, and Opera., here is a usage example:
This is tdiv8. It is rotated 165 degrees.
// Set CSS transform property
// Rotate div
$('#tdiv8').css('transform', 'rotate(165deg)');
// Get CSS transform property **
var transform = $('#tdiv8').css('transform');
** An important note for jQuery 1.4.3+ users: As of jQuery 1.4.3, the default behavior when fetching a CSS transform property with jQuery changed. Prior to 1.4.3 the value returned was the string value of the CSS transform as defined by the user such as 'rotate(30deg)' or 'scale(1.5)'. As of 1.4.3, the value returned was a string representing the six value transformation matrix itself. Because people using this patch may have written code that relies on the older behavior, and because my patch to add CSS transform animation to jQuery relies on this older behavior, I have decided to update my patch to force 1.4.3 to return the string of the transform as defined by the user instead of the matrix. This means if you apply my patch to your jQuery 1.4.3, other people's transform code that relies on this new 1.4.3 behavior may not work. (My other option -- and something I may do in the future -- would be to internally map all string transform rules into a transformation matrix inside of my patch.)
I've submitted a patch for jQuery itself, but in the meantime you can use my Monkey Patch to modify jQuery (tested currently through 1.4.3) using what the jQuery docs call the "Proxy Pattern".
Download and Related Links
I had hoped simply including Transformie would add Internet Explorer 6,7,8 support, but unfortunately a bug causes IE to throw Overflow errors if you rapidly change the transform property on several elements (such as if you were animating them). I did a little further investigation of IE's Matrix Filter, and I was able to use it directly without generating Overflow errors, however the support was less than ideal. The Matrix Filter has issues including element bounding box clipping/stretching as well as the fact that the transform origin is top-left instead of center. Still, it is perhaps an eventual goal of mine to robustly support CSS Transforms in IE with the jQuery css() method through the use of the Matrix Filter. UPDATE: IE9 drops support for filters, but as of Platform Preview 7 it has support for CSS3 transforms! This means this code now works in the newest versions of IE9!