Today I would like to show you how to use the CSS 3 property transform in a way that it runs in every browser including IE 6 and up. Instead of inventing my own I'll use the old school clock example by Toby Pitman which is described here. Basically it's using the transform property in a clever way to create a working clock. You can see the original demo here.

Browser support

The example was build with webkit and gecko browsers in mind. It will run just fine using Chrome, Safari or Firefox. Our goal today is to get this working across all major browsers. This means we need to add support for Opera and IE. Let's get to work...

Opera, IE 9 and IE 10

This is actually the easy part. If we take a look at the code we can see that it only uses the -webkit and -moz prefix to set the transform property:

$("#sec").css({ "-moz-transform": srotate, "-webkit-transform": srotate }); We can simply add the Opera, IE prefix and the unprefixed version to get these browsers supported.

$("#sec").css({ "-moz-transform": srotate, "-webkit-transform": srotate, "-ms-transform": srotate, "-o-transform": srotate, "transform":srotate });

And just like that the example runs in the most current version of all major browsers!

Tackeling older IE versions

Many of you will argue that there is no point in supporting older IE versions because no one uses them anymore. In many cases you will be able to get away by dropping support for IE 6 and 7. But all Windows XP users are stuck using IE 8 and are unable to update there browser to IE 9. And there are times when you need to support these older browsers, maybe because of cooperate restrictions or your client still uses it to test your work :-(

Luckily Internet Explorer already supports some kind of transformation known as Matrix Filters. Yes you are right, native support for all kinds of transformations was already available back in IE 6. Now we could manually add the filters inside the JavaScript to get IE support which would involve a lot of hard thinking. I'm not really into this and so I figured maybe somebody already solved this problem? Yes Paul Bakaus already has!

Introducing Transformie

Paul Bakaus has written a script to emulate the CSS 3 transform property for older IE versions. You can download the script at github. And it's dead simple to use. Just include the script files in the page header and you are done. Transformie will do all the heavy lifting and hard thinking for you.

<script type="text/javascript" src="http://crossbrowserbook.com/Blog/sylvester.js"></script> <script type="text/javascript" src="http://crossbrowserbook.com/Blog/transformie.js"></script>

Just like that the example works in old IE versions starting with IE 7!

Conclusion and Downloads

As you can see it was really easy to add browser support to this example. If you want you can add IE 6 support yourself. The example already works correctly but IE 6 does not support transparent png files out of the box. Again you can fix this using filters.

You can try the updated clock here or download the example.