Guide to creat an analogue clock using CSS

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 […]

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

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.