CSS FLIP-COUNTER
EXPERIMENT

Default Light Small Huge

This has been broken for a long time... new version here.

This counter does not use a single image, it is drawn entirely in CSS and animated via CSS transforms.

It is adapted from my image-based flip counter, and is an experiment inspired by a recent demo from Codrops.
All credit for the creative use of CSS transforms goes to the folks at Codrops, all I did was apply it to my existing script.

So far this only works in Chrome, tested in 16.0.912.59 beta and 15.0.847.121 stable. Safari has display issues with the digit flip and reflections. If viewing on a non-webkit browser, you'll probably see the numbers change, but no animation. This has not been thoroughly tested or optimized, just a proof of concept.

To stop the counter, slide the increment to zero.