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…