CSS3 Clock

by Marc Malignan

HTML

<div class="clock">
    <div class="separators">
        <div class="hours"></div>
        <div class="minutes"></div>
    </div>
    <div class="date"></div>
    <div class="hands">
        <div class="rotating hours"></div>
        <div class="rotating minutes"></div>
        <div class="rotating seconds"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 20px;
    background: silver;
}

.clock {
    position: relative;
    width: 300px; height: 300px;
    background: white;
    border-radius: 50%;
    border: 10px solid black;
}
.clock:before {
    content: '';
    position: absolute;
    left: 140px; top: 140px;
    width: 20px; height: 20px;
    background: black;
    border-radius: 50%;
}
.clock:after {
    content: '';
    position: absolute;
    left: 145px; top: 145px;
    width: 10px; height: 10px;
    background: red;
    border-radius: 50%;
}

.rotating {
    position: absolute;
    height: 100%;
}
.separators .hours .rotating { left: 148px; width: 4px; }
.separators .minutes .rotating { left: 149px; width: 2px; }
.hands .rotating.hours { left: 146px; width: 8px; }
.hands .rotating.minutes { left: 146px; width: 8px; }
.hands .rotating.seconds { left: 148px; width: 4px; }

/* HOURS / MINUTES SEPARATORS */
.separators .rotating:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    background: black;
}
.separators .rotating:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    background: black;
}
.separators .hours .rotating:before { height: 20px; }
.separators .hours .rotating:after { height: 20px; }
.separators .minutes .rotating:before { height: 10px; }
.separators .minutes .rotating:after { height: 10px; }

/* HANDS */
.hands .rotating:before {
    content: '';
    position: absolute;
    bottom: 50%;
    width: 100%; height: 30%;
    background: black;
}
.hands .rotating.hours:before { height: 30%; }
.hands .rotating.minutes:before { height: 42%; }
.hands .rotating.seconds:before { background: red; height: 42%; }

/* DATE */
.date {
    position: absolute;
    top: 130px; right: 40px;
    height: 34px; width: 34px;
    line-height: 34px;
    text-align: center;
    font-family: helvetica;
    font-weight: bold;
    font-size: 24px;
    color: rgb(50,50,50);
    border-radius: 8px;
    border: 4px double...

JavaScript

function buildClock() {
    var html = '';
    for(var i=0; i<6; i++) {
        var rotate = i * 30;
        html += '<div class="rotating" style="';
        html += '-webkit-transform: rotate('+ rotate +'deg);';
        html += '-moz-transform: rotate('+ rotate +'deg);';
        html += '-ms-transform: rotate('+ rotate +'deg);';
        html += '-o-transform: rotate('+ rotate +'deg);';
        html += 'transform: rotate('+ rotate +'deg);';
        html += '"></div>';
    }
    $('.separators .hours').append(html);
    
    html = '';
    for(var i=0; i<30; i++) {
        var rotate = i * 6;
        if(i%5!=0) {
            html += '<div class="rotating" style="';
            html += '-webkit-transform: rotate('+ rotate +'deg);';
            html += '-moz-transform: rotate('+ rotate +'deg);';
            html += '-ms-transform: rotate('+ rotate +'deg);';
            html += '-o-transform: rotate('+ rotate +'deg);';
            html += 'transform: rotate('+ rotate +'deg);';
            html += '"></div>';
        }
    }
    $('.separators .minutes').append(html);
}

function refreshTime() {
    var d = new Date();
    
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();
    
    var day = d.getDate();
    if(day < 10) day = '0'+day;
 
    var hRotate = (h*30) + (m/60*30);
    var mRotate = (m*6) + (s/60*6);
    var sRotate = s*6;
    
    $('.clock .hands .hours').css('-webkit-transform', 'rotate('+ hRotate + 'deg)');
    $('.clock .hands .hours').css('-moz-transform', 'rotate('+ hRotate + 'deg)');
    $('.clock .hands .hours').css('-ms-transform', 'rotate('+ hRotate + 'deg)');
    $('.clock .hands .hours').css('-o-transform', 'rotate('+ hRotate + 'deg)');
    $('.clock .hands .hours').css('ransform', 'rotate('+ hRotate + 'deg)');
    $('.clock .hands .minutes').css('-webkit-transform', 'rotate('+ mRotate + 'deg)');
    $('.clock .hands .minutes').css('-moz-transform', 'rotate('+ mRotate + 'deg)');
    $('.clock .hands...