March 27, 2009
2:55 am | Last updated: March 27, 2009 at: 2:56 am

Paul Hayes has created an interesting experiment that shows “how to create an analogue clock using just CSS and JavaScript is only used to get the current time”. The magic that rotates the clock’s hands comes via two WebKit specific CSS properties, -webkit-transition and -webkit-transform

#clock img[src*='hour'] {<br />-webkit-transform: rotate(90deg);<br />}<br />&nbsp;<br />#clock img[src*='second'] {<br />-webkit-transition: -webkit-transform 60s linear;<br />}<br />&nbsp;<br />#clock:target img[src*='second'] {<br />-webkit-transform: rotate(360deg);<br />}

Full Article

Source:→ Ajaxian

Loading

Contextual Related Posts:

No followup yet

Leave a Response

Comment Preview
« Google AdWords Beta Interface expanded to U.K., AustraliaYouTube features name change announced »
Feed Icon

Subscribe via RSS or email: