Patching jQuery css() Method to Support 'transform'
- updated:
- 2009.02.23
- 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 and Firefox 3.5, here is a usage example:
This is tdiv8.
// Set CSS transform property
// Rotate a div in either WebKit/Safari or Firefox 3.1
$('#tdiv8').css('transform', 'rotate(165deg)');
// Get CSS transform property
var transform = $('#tdiv8').css('transform');
I've submitted a patch for jQuery itself, but in the meantime you can use my Monkey Patch to modify jQuery 1.3.1 or 1.3.2 using what the jQuery docs call the "Proxy Pattern".
The code can be found and downloaded from my GitHub page.
I had hoped simply including Transformie would add Internet Explorer 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.