Prometheus Clock with CSS3 Animations and HTML5 Background Video

DEMO

I was inspired by the photo of some Prometheus technology and decided to spend the weekend building a prometheus style clock to test the animation capabilities of html5 and CSS3.

There are 13 individual CSS3 animations on various timing loops including cubic-bezier and easing functions, one HTML5 video (for background &  ambiancé) and perspective changes (using css transformations). Most of it uses CSS3 animations for rotations, the charts, the glowing red dot in the middle and even the lens flair you see from time to time. Additionally, there’s an html5 video in the background that flashes static about every 15 – 20 seconds. Then I’m using “-webkit-perspective” to adjust the view perspective based on mouse movement. To make the individual layers I’m using “-transform: translateZ([num]px)” to adjust the height of the layers and put “transform-style: preserve-3d;” to keep everything on one plane.

The clock itself is powered by Javascript (no surprise there). In fact you can just copy and past the script into your site, point it at the right element and you’ve got a working clock in minutes!

I’m pretty happy with the way it turned out, the adjustment in perspective totally changes the look and feel, I recommend it’s use sparingly though as I approached the limit of the browser’s capability to handle this well. Hollar if you want more of an explanation, I also have the project up on github.

Best viewed on Safari, also works in Chrome Canary and the animations work with Firefox…but the perspective doesn’t change and I’m not spending any more of my weekend figuring that out…

DEMO

GITHUB