The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS3 and jQuery Clock face – Safari only!

  • # November 3, 2008 at 9:13 am

    Hi all,

    Just having a bit of fun really. I think this might be the first real CSS driven clock face.

    I’ve been mucking around with -webkit-transform: rotate and came up with this idea for the clock. It’s Safari only ( the lastest release ) as it’s the only one I know that supports the Rotate feature in CSS3.

    I’ve used jQuery to get the date/time info and translate that into an angle in degrees for each clock hand before injecting the webkit CSS3 style info. It even validates as CSS2.1!!!

    Like I said just a bit of fun but turned out ok I think.


    Get the time here ( London time only, sorry! ;) )

    CSS Clock

    # November 3, 2008 at 10:19 am

    This reply has been reported for inappropriate content.

    Hey toby,

    Pretty killer demo / proof of concept! (again!) Maybe this would be another cool demo tutorial?

    # July 7, 2009 at 5:31 am

    Hi Toby,

    Very good idea, I feel very sad it don’t work in Firefox and IE. So, I add jquery plugin for it.

    Now, Old School Clock can tick in Firefox or IE.

    Jacko Chang
    jacko.chang at

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed