Monday, August 18th, 2008

Transformie: Implement WebKit CSS transforms in IE

Category: CSS, IE, jQuery

<p>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:
    javascript
    < view plain text >
    1. jQuery(Transformie.trackChangesFor).bind('propertychange', function(e) {
    2.     if(e.originalEvent.propertyName == 'style.webkitTransform') {
    3.         Transformie.refreshMatrix(this);   
    4.     }          
    5. });

From there you can see the transforms which look like:

javascript
< view plain text >
  1. // rotate
  2. matrices.push($M([
  3.     [Math.cos(a),   -Math.sin(a),   0],
  4.     [Math.sin(a),   Math.cos(a),    0],
  5.     [0, 0,  1]
  6. ]));

Very nice indeed.

Related Content:

Posted by Dion Almaer at 7:43 am
9 Comments

+++--
3.6 rating from 35 votes

9 Comments »

Comments feed TrackBack URI

Thats nice to hear at last some tweaks for IE Too :-))

Comment by mjsadiq — August 18, 2008

“at last some tweaks”? IE could do this in july of 2000. Almost 10 years of CSS-defined 2D transformations.

And since IE was the first to do these transformations it might be fair to port the webkit implementation to IE’s… No… Better not…

Comment by Lon42 — August 18, 2008

Great, now we have a hack emulating a proprietary behaviour using another proprietary behaviour, when there’s a standard way to do it: SVG and foreignObject… that’s exactly the way the web should not behave

Comment by Hans Schmucker — August 18, 2008

When IE implements it, it’s Breaking the Standard. When webkit/mozilla implements it, it’s Growing The Web. What gives?

Comment by ilazarte — August 18, 2008

What gives ? maybe the fact that when webkit/mozila/opera implement new stuffs, they usually open a dialog and propose it for standaradization.

Yes, kudos for the experiment, and to IE for having that for 8 years ( heck I played with it myself back in the days and it was fun while it lasted ) but I’m afraid this is not the way to go. Until there is standards way to do CSS transformations like this, the way to go is SVG + foreignObjects.

Comment by p01 — August 18, 2008

Lots of talk about the open web going around, just not when it counts. Safari is filled with proprietary code. Adobe stuffs Flash with its own browser. Google builds a Flash-indexing robot! Is SVG even supported by the W3C anymore?

It seems the term “open web” means to open all of your competitor’s doors while keeping a lock on your own.

Comment by Brad — August 18, 2008

Kudos to the developer for what is clearly skillful work. But, resume padding aside…this represents a strange trend. It was demonstrated by the adventure that Flash developers went on for a few years back around the turn of the millenium that these sorts of effects only lead to useless eye candy at the very best, and often to outright interface disasters. At least in the case of Flash there existed a quick and responsive environment, which Javascript is not able to match. I simply fear the worst here. Resig, god love him, scared me to death when he ported processing. There are people working on 3d engines. Please, please, don’t repeat history.

Comment by sandro — August 19, 2008

I created a simple but funny rotating image gallery using WebKits CSS transform and transition features.
It would be nice to see those features in upcoming versions of Firefox and Internet Explorer. It could replace a lot of effects currently only possible with JavaScript libraries like script.aculo.us.

Comment by webmatze — August 20, 2008

Thank you for the source. It works great in IE8, CHROME and Safari. I’ve managed to rotate text and table within a div. But when I go to print it prints correctly only in Safari. In IE8 there’s empty space and CHROME crashes. So I’ve tried a lot approaches including the next styles but it only works in Safari. Any help will be appreciated. Thanx for the code again.
#container1
{
position: relative;
width: 700px;
height: 1000px;
margin: 2% 5%;
page-break-after: always;
}

div.test
{
-webkit-transform: rotate(90deg);
height: 80%;
margin: 10% 0%;
}

div.test
{
-webkit-transform: rotate(90deg);
height: 80%;
margin: 10% 0%;
}
input
{
display: none;
}
.thead th
{
border-right-color: #6666FF;
}

Comment by pcpavlov — December 22, 2008

Leave a comment

You must be logged in to post a comment.