inicio mail me! sindicaci;ón

An Analogue Clock using Safari Transforms

· Filed under Development

Recently Safari 3.1 has been released for Mac and Windows, boasting a whole load of useful new features. One of these is support for CSS transforms – i.e. you can translate, scale, and rotate HTML elements in a web page.

CSS transforms can come in quite handy for making complex dynamic objects, without the need for 3rd party plugins or applets. For example i was able to make the following BBC-esque analogue clock, using only DIV’s and JavaScript :

(Note that currently this only works in Safari 3.1)

EDIT: Now works in FireFox too!

Yes, DIV’s and JavaScript. No Canvas, no Flash, no SilverLight, no Java Applets, no Plugins.

It makes me wonder, considering that browsers seem to be getting so powerful nowadays, should one really bother using Flash & co anymore?

Posted on March 20, 2008

  • Linda
    Do you know why your clock will not work for Safari 4?
  • James Urquhart
    Yikes! Thanks for pointing that out. Seems i misconfigured the server - should work fine now. :)
  • Jiggy
    it's been several months ... do you have it working in IE and FF ?
  • James Urquhart
    No, however it might be possible to use IE's transforms to achieve the same effect. As for Firefox, i'm still waiting for the support.
blog comments powered by Disqus