Wills Bithrey

Animated Webkit Flipclock

  • Save
Animated Webkit Flipclock webkit flipclock clock 3d transforms css3

Here's something I've been working on on-and-off for a long time. I figured i'd shove a demo out there to see what you guys think. The design isn't mine and it from Max's awesome Flip Clock PSD available here

My work has been in trying to make this think work as great as it looks ;). ALL the animates are done with 100% CSS 3D transforms. Because of this this demo is highly experimental and only works in Safari and the dev version of Chrome (v11 just added hardware accelerated CSS).

Javascript is only used to control timing and stuff.

It seem's Chrome has someway to go on the 3d transforms front before it's caught up with Safari.

Once again, please view in a recent version of Safari ;)

I need to fix some of my clock logic and the JS is currently a mess, but hey I said it was experimental so ;). If anyone want's to give me a hand with finishing the clock logic that would be great else I'm sure i will get round to it just as soon as I graduate...

Yes I'm using Safari already!! - Let me check it out

keyboard shortcuts: L or F like