CSS Clock

This is a clock I made while experimenting with WebKit's support for CSS 3D transforms and transitions. JavaScript is used to set the time and turn the wheels, but the wheels themselves are built and animated using only CSS. If you have a recent version of Safari or the WebKit nightly on Snow Leopard, you can try it out at http://www.gesteves.com/experiments/clock.html

I also made a timer that works without JavaScript: http://www.gesteves.com/experiments/timer.html

Category:

Science & Technology

Tags:

• web design
• web development
• css
• css3
• html
• webkit
• safari

[misterJaaay]

doesn`t work in chrome normally

[AlekseyMichnik]

amazing.... greate... 

[Nils3OWN]

You are doing this because Mac can't play any games? :D Hehehe

[didjmark]

@sebzim4500 Definately. They had the rest of the filters done 6 years ago, rotation, skew, drop-shadow, various fades and transistions. I made a maze at the time that looked 3d but without perspective. Made a new one recently but only works in Safari though. I think MS gave up when everyone moaned about propriety styling, and now they are all at it! Still, it is fun :)

Here's a vid of my go at perspective on Safari...

youtube.com/watch?v=McgdzG5LEA­A

[sebzim4500]

awesome, I just wish they would bring 3d css transforms to windows... :-(