Bringing CSS Transforms to Internet Explorer
Extending the teaser
So I hope I got you a bit excited with my little teaser, and yes, the second tab was opened on purpose to give you a hint. Indeed, I was talking about CSS transforms, and yes, I was talking about somehow successfully porting them to Firefox.
I won’t go into details of my implemention of it yet, but I can assure you it isn’t using any additional plugins. Anyway, during my CSS transformation research for possible other browser implementations, I came up with something entirely different, and it was completely unexpected to me. As it turns out, Internet Explorer already supports CSS transformations in some way for years!
I was telling myself that surely, this wouldn’t actually work, since the Matrix Filter would allow you to actually rotate, scale and do whatever you want with elements, in IE, natively. And then, someone must have figured before me, years ago. But it turns out that the Matrix filter isn’t that popular at all (yes, these are filters that we hated so much back in time, and I feel totally stupid doing so now), so I decided to give it a go and played around with it.
Transformie!
What I came up with, is my new jQuery plugin (though fairly easy to convert to other libs) “Transformie“, a javascript plugin that comes in less than 5k that you embed into web pages and that maps the native IE Filter API to CSS transitions as proposed by Webkit.
Transformie supports the following functions from Webkit’s syntax (in degrees, radians or grads):
- rotate
- scale, scaleX, scaleY
- skew, skewX, skewY
- matrix (with the exception of the last two modifiers, tx and ty)
The reason the translate functions are not yet supported is the fact that IE’s Matrix function is not as flexible as Webkit’s, since you’re not able to specify tx and ty, the third columns’ first row value and second row value in the actual matrix (there is a way, but then the auto scaling doesn’t work anymore – does’t help much).
However, it’s fairly easy to also add the translate functions and the last two missing values of the matrix function by simply modifying the position top/left values. The only problem is that the actual behaviour then is a bit different than Webkit’s – Webkit’s translate doesn’t modify layout.
Also good to understand is the -webkit-transform-origin css function, that defaults to the center of the element in Webkit. However, in IE, and therefore also in my implemention (at this moment), the top left corner is the origin for calculations. Again, this should be easy to fix using position values.
Anyway, let’s get to the point. To show you how simple it really is to get started with Transformie, I simply included Transformie, and its dependancies Sylvester (great javascript utility, very useful for matrix multiplication!) and jQuery (was already included there, obviously) into my last blog post’s entry Coverflow, and from then it’s prety straight forward – reload Internet Explorer, and you should have CSS transforms!
One implementation detail that stands out is the usage of the terribly handy event “onpropertychange“, which 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. Neat, huh?
Documentation
Anyway, enough said, give it a try. It’s tested in Internet Explorer 6 and 7 and simply does nothing in other browsers. The following can be optionally configured directly after script inclusion:
- Transformie.inlineCSS = jQuerySelector (default: “*”, defines if inline styles should be parsed for selected elements on page load [disable or narrow down for better performance])
- Transformie.stylesheets = Boolean (default: true, defines if stylesheets are parsed on page load)
- Transformie.trackChangesFor = jQuerySelector (default: “*”, defines for what elements changes should be tracked [disable or narrow down for better performance])
And when you’re done, simply use -webkit-transform or transform (thanks for the hint, John Resig!) in your Stylesheets or inline in the style tag.
Download
Here’s the download:
- Transformie 0.2 (bundle, also contains jQuery and Sylvester, recommended)
- Transformie 0.2 (5k, single file, uncompressed)
- Transformie 0.2 (3k, single file, minified)
Transformie is, like jQuery, MIT/GPL double licensed.
Enjoy and leave me comments!
I finally combined two interests of mine into one: My love for Japan and my day job. From May 14th to May 20th, I will be in Tokyo participating and speaking on two great conferences.