Transformie: Implement WebKit CSS transforms in IE

18 August 2008, 5:43 am

Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE When you include the library, it can scan for your -webkit-transform-* transforms (soon to support the standard transform-*) and will go to work for you using a couple of nifty technologies all put together: IE Filters such as DXImageTransform.Microsoft.Matrix that do the rotate, skew, scale, and general matrix work for you onpropertychange "almost behaves like DOMAttrChanged, but is much finer grained. It is capable of telling you whenever a DOM property changes on an element, and when you track the style attribute, it actually passes the actual style that changed along with the event." Here it is at work in the library: PLAIN TEXT JAVASCRIPT:   jQuery(Transformie.trackChangesFor).bind('propertychange', function(e) {         if(e.originalEvent.propertyName == 'style.webkitTransform') {                 Transformie.refreshMatrix(this);                }                      });   From there you can see the transforms which look like: PLAIN TEXT JAVASCRIPT:   // rotate matrices.push($M([         [Math.cos(a),   -Math.sin(a),      0],         [Math.sin(a),   Math.cos(a),       0],         [0,     0,   1] ]));   Very nice indeed. ... read more