Analog clock using css3 and jquery
Hi guys! Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock hands a rotating effect.
The HTML
Html part is very simple.
<div id="clock"> <div id="hour" style="transform: rotate(334.5deg);"><img src="http://demo.web3designs.com/images/hourhand.png"></div> <div id="minute" style="transform: rotate(54deg);"><img src="http://demo.web3designs.com/images/minhand.png"></div> <div id="second" style="transform: rotate(108deg);"><img src="http://demo.web3designs.com/images/sechand.png"></div> </div>
The CSS
Now, It’s time to play with some cool css3 properties like transition, transform and css easing.
#clock { background-image: url("http://demo.web3designs.com/images/clockBg.png"); height: 200px; position: relative; width: 200px } #clock div { position: absolute; left:50% } #clock img[src*="second"] { transition: transform 600000s linear 0s; } #clock:target img[src*="second"] { transform: rotate(3600000deg); } #clock img[src*="minute"] { transition: transform 360000s linear 0s; } #clock:target img[src*="minute"] { transform: rotate(36000deg); } #clock img[src*="hour"] { transition: transform 216000s linear 0s; } #clock:target img[src*="hour"] { transform: rotate(360deg); }
jQuery or Java-Script
firstly we will include the most advanced jQuery library. After adding this powerful library we will use some line of custom java-script code for rotating three hands of clock i.e. Hour, Minute and Second. That’s it.
function Clock_dg(prop) { var angle = 360/60, date = new Date(); var h = date.getHours(); if(h > 12) { h = h - 12; } hour = h; minute = date.getMinutes(), second = date.getSeconds(), hourAngle = (360/12) * hour + (360/(12*60)) * minute; $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)'; $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)'; $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)'; } $(function(){ var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), prop, el = document.createElement('div'); for(var i = 0, l = props.length; i < l; i++) { if(typeof el.style[props[i]] !== "undefined") { prop = props[i]; break; } } setInterval(function(){ Clock_dg(prop) },100); });
BROWSER COMPATIBILITY:
As we mentioned before, this technology is developed with jQuery so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers:
- Chrome 15+
- Firefox 9+
- Safari 4+
- IE9+
- Opera 12+
Your turn
I hope you enjoyed this article and the techniques I used. Please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…
Dhiraj kumar is an Information Technology graduate who loves learning new things. A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development

Hello sir
I really want to Thank you for this use full tutorial . I very much new in programming field
that why I want to know .. how can I make analog clock for window app.
Thank you
Palak Dubey
Hi Palak, I am glad to see you find this post useful. Enjoy reading!
Dhiraj, Smart work, Great Analog Clock. Cheers for the coding….
I appreciate your effort to help web designers and individuals who are willing to develop such a wonderful Analog Clock….
Hey, thanks for your nice comment.
Dhiraj, Smart work, Great Analog Clock.
Thanks for your comment. I’m glad you like my articles.
Very useful.. will use in next project.
Hey Raju, I’m glad you like my articles. Go ahead & try it..
You are despicable. The comment that you attributed to me has been stripped of all admonishments, leaving the sad repetitive ““Dhiraj, Smart work, Great Analog Clock.”
If you had decided not to approve my comment, fair enough – but you had NO RIGHT to FALSIFY my post. In response, I am now posting to all tech sites to which I am a member letting them know what a complete scumbag you are. If it was a genuine mistake, fine, but you just proved that you are a momumental loser. I dare you to approve this post without changing it.
Is any problem, mr. Ben?
how come when I insert the code into my page it just shows clock at 12
Clock is not working . May be cell is mising….
It is working fine. You can check the demo – http://demo.web3designs.com/analog-clock-using-css3-jquery.htm
Many thanks Dhiraj!
Using the demo I managed to customise the clock.
But I’m wondering, the time is being synced with the visitors local pc/phone right?
Is it also possible to sync it with some time server, ensuring that always the correct time is being shown?
-Samir