Analogue flip-clock wiith CSS3 and jQuery

After creating pie charts and international flags with CSS3's border-radius and transform:rotate, I figured I'd try the other transformations available; specifically, skew and scale. By combining these two features with a bit of jQuery to animate, I created a rather nifty retro-styled analogue flip-clock.

Now, this is just a proof of concept, but it could fairly easily be turned into a count down clock, or dynamically incrementing "total donations" type display. To show this functionality, I've added a reset to start the clock at 12:00;00 am, making it flip forward to the current time.

As with the other CSS3 experiments, it currently only works in Firefox, Google Chrome, and Safari (which loses the rounded corners due to an interaction bug with transform-origin and border radius) UPDATE and Opera 10.5. One the nice thing about this experiment, as opposed to the other two, is that the clock still works in IE, even though the flip animation is missing.

Tags: , , ,
2010.02.22 12:20 PM | Permalink 2 Comments


  1. Oops. Forgot about IE not liking negative start values in substring. I wasn't really testing it in IE, I just did a quick sanity check. It's fixed now.
    Patrick Denny on
  2. Hey Pat, Like a lot of people, I had one of these clocks. THe only thing missing is the aggrivating click sound as the next paddle drops down. Great for keeping you awake at, say, 2:37:46 am. There's a minor error in the representation. Instead of showing the seconds as :12, it shows them as :012 with most of the 2 occluded. You need to suppress the leading 0 for 10 and higher.
    stephen grant on