Analog Clock

HTML

<div id="time">
    <span id="second"></span>
    <span id="minute"></span>
    <span id="hour"></span>
</div>

JS/jQuery

$(document).ready(function(){

    setInterval(function(){
        var date = new Date();
                
        var second = date.getSeconds();
        var minute = date.getMinutes();
        var hour = date.getHours();
                
        var s = second * 6 -90;
        var m = minute * 6 -90;
        var hm = date.getMinutes() * 0.5;
                
        if(hour > 12){
            g = ((hour - 12) * 30) - 90;
        }else{
            g = (hour * 30) - 90;
        }
        var h = g + hm;
                
        $('#second').css('transform', 'rotate('+s+'deg)');
        $('#minute').css('transform', 'rotate('+m+'deg)');
        $('#hour').css('transform', 'rotate('+h+'deg)');

    },1000);

});

CSS

#time{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border: 4px solid #e3e3e3;
    box-shadow: 0 0 0 10px #428fbf, inset 0 0 25px rgba(0,0,0,.4);
    border-radius: 50%;
    background: #fff;
}
#second {
    width: 50%;
    height: 1px;
    background: #f00;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: left;
    transform-origin: left;
}
#minute {
    width: 50%;
    height: 2px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: left;
    transform-origin: left;
}
#hour {
    width: 40%;
    height: 2px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: left;
    transform-origin: left;
}

Analog clock