An Animated Clock of Apple Counter Style

Dec 14, 2012

Inspired by the Apple-style counter, in this mini-project, I created an animated clock with CSS3.


  • The digit will flip once a second to display the current time.
  • Transitions and animations are created using CSS3, so it requires a browser that supports CSS3 transitions and animations to work properly.

Known Issues

  • When viewed in Firefox, 3d perspective will be lost.
  • In IE 10, digits on backface are not rendered.


This demo is best viewed with Webkit browsers.

This demo uses “Myriad Pro” as the font for the digits. If “Myriad Pro” is not installed, “Helvetica Neue” or “Arial” will be used.

Leave a Reply