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:

  • (Outdated bundles removed)
  • Github (source)

Transformie is, like jQuery, MIT/GPL double licensed.

Enjoy and leave me comments!

20 Comments

» Bringing CSS Transform to Internet Explorer  on August 16th, 2008

[...] can read the rest of this blog post by going to the original source, here [...]

Bringing CSS Transform to Internet Explorer  on August 16th, 2008

[...] Go to the author’s original blog: Bringing CSS Transform to Internet Explorer [...]

Internet » Internet Superstar - Barack Obama Is Your New Bicycle  on August 16th, 2008

[...] Bringing CSS Transform to Internet Explorerand 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 … [...]

John Resig  on August 16th, 2008

This is very cool! There’s one point that I’m confused on, though: Why are you manipulating the -webkit-transform property instead of the transform property? If you’re writing your code in a standards-compliant way you’ll be including both, anyway, and requiring that a WebKit include must be used for Internet Explorer content seems a little strange.

admin  on August 16th, 2008

That’s indeed a good point John, haven’t thought of it yet. I guess that’s version 0.2 then :)

Bringing CSS Transforms to Internet Explorer  on August 17th, 2008

[...] Go to the author’s original blog: Bringing CSS Transforms to Internet Explorer [...]

links for 2008-08-17 | iKeif - tech and social media geek, mootools fan, and a ton of links  on August 17th, 2008

[...] Bookmarked a link: The Sea of Ideas » Blog Archive » Bringing CSS Transforms to Internet Explorer [...]

javam » Blog Arşivi » Transformie: CSS Transform’larını Internet Explorer’a taşımak  on August 18th, 2008

[...] Transformie: CSS Transform’larını Internet Explorer’a taşımak (Orijinal Yazı) [...]

Ajaxian » Transformie: Implement WebKit CSS transforms in IE  on August 18th, 2008

[...] Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE [...]

Usando CSS Animations | aNieto2K  on August 18th, 2008

[...] Ajaxian presentan Transformie, un plugin de jQuery que nos permite disfrutar de estas transformaciónes en IE, para ello hace uso [...]

Ash Searle  on August 18th, 2008

I’m a big fan or Resig’s work, but isn’t it jumping the gun to allow “transform” at this stage?

There’s not even a working-draft specification for CSS Transformations:
http://www.w3.org/Style/CSS/current-work#transform

At this stage, they’re a proprietary extension, and should be marked up as such (to pass validation etc.) The only ‘specification’ is Apple’s webkit developers early draft:
http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html

I guess all that boils down to is that “transform” isn’t standards-compliant – and neither are “transition” or “animation” (before you head down that path)

Ajax Girl » Blog Archive » Transformie: Implement WebKit CSS transforms in IE  on August 18th, 2008

[...] Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE [...]

Javascript News » Blog Archive » Transformie: Implement WebKit CSS transforms in IE  on August 18th, 2008

[...] Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE [...]

Simon Brüchner  on August 19th, 2008

Hi Paul,
nette Arbeit!
Grüße!

James Urquhart  on August 19th, 2008

Cool. Looks like i’ll be able to get my CSS transformed webkit clock working in IE after all. Thanks. :)

Morris Johns  on August 22nd, 2008

Interesting! Of course fonts can look a bit odd when using transforms in IE7 because it disables ClearType :)

rng  on March 30th, 2009

In ui.coverflow.js, it should be WebkitTransform (capital W) instead of webkitTransform. Webkit accepts either, but per the standard the property should start with a hyphen in CSS = an uppercase letter in the DOM.

It also works in Firefox 3.1beta if you add MozTransform. CSS transforms are announced for IE9 and Opera 10.x according to http://a.deveria.com/caniuse/#feat=transforms .

The future-proof way to implement this would be to use the actual CSS3 property “transform” and map it to the temporary Mozilla and Webkit syntaxes in Transformie, so we don’t need duplicate lines in our CSS. Remember the -khtml-opacity/-webkit-opacity/-moz-opacity/filter:Alpha incantation? Obsolete now, but it still clutters up stylesheets. Better to offload those temporary fixes to Javascript.

ghaladen  on October 26th, 2009

Not really sure, but couldn’t this be amended to add css transform support in non-IE browsers that don’t support transforms using the canvas tag?

VarAttinabine  on November 1st, 2009

Я все понял и ни чего не понял:)

Have a comment or question?