CSS clock with connected hands

by OxC0FFEE

HTML

<div class="outercontainer">
    <div class="container">
    <div class="clock">
    <div class="hands">
        <div id="hourcontainer"><div class="hour"><div class="hand"><span class="face">HH</span></div><div id="minutecontainer"><div class="minute"><div class="hand"><span class="face">MM</span></div><div id="secondcontainer"><div class="second"><div class="hand"><span class="face">SS</span></div></div></div></div></div></div></div>
    </div>
</div>
</div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.outercontainer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.container {
    display: table-cell;
    vertical-align: middle;
}
.clock {
    margin: 2em auto 0 auto; 
    width: 100%;
}
.hands {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -transform: rotate(-90deg);
}
#hourcontainer, #minutecontainer, #secondcontainer {
    -webkit-transform-origin: 0%;
    -moz-transform-origin: 0%;
    -transform-origin: 0%;
/*    outline: 1px solid black; */
    display: inline-block;
    float: right;
}
#hourcontainer {
    -webkit-transform-origin: -1em;
    -moz-transform-origin: -1em;
    -transform-origin: -1em;
}
#minutecontainer {
    -webkit-transform-origin: -0.75em;
    -moz-transform-origin: -0.75em;
    -transform-origin: -0.75em;
}
#secondcontainer {
    -webkit-transform-origin: -0.5em;
    -moz-transform-origin: -0.5em;
    -transform-origin: -0.5em;
}
.hour, .minute, .second {
    width: 10em;
    display: inline-block;
    float: right;
}
.hour span, .minute span, .second span {
    display: inline-block;
    padding: 0 0.5em;
    font-family: "Myriad Pro", Myriad, Trebuchet MS, Arial, Sans-Serif;
}
.hand {
    width: 10em;
    background-color: black;
    float: left;
    border-radius: 1em;
    border: 1px solid black;
}
.minute .hand {
    background-color: red;
}
.second .hand {
    background-color: blue;
}
.hour, .minute, .second {
/*    outline: 1px solid green; */
}
.hour {
    width: 30em;
    -webkit-animation: rotation 43200s infinite linear; /* 43200 */
    -moz-animation: rotation 43200s infinite linear; /* 43200 */
    -animation: rotation 43200s infinite linear; /* 43200 */
    -webkit-transform-origin: 1em;
    -moz-transform-origin: 1em;
    -transform-origin: 1em;
}
.hour span {
    line-height: 2em;
    color: white;
}
.minute {
    width: 20em;
    -webkit-animation:...

JavaScript

var currentTime = new Date ();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();

/* compensate for nested rotation - minutes/seconds not quite right? */
$("#hourcontainer").css("-webkit-transform", "rotate("+ currentHours*30 +"deg)");
$("#minutecontainer").css("-webkit-transform", "rotate("+ (-currentHours*30 + currentMinutes*6) +"deg)");
$("#secondcontainer").css("-webkit-transform", "rotate("+ (-(currentMinutes*6) + currentSeconds*6) +"deg)");

$("#hourcontainer").css("-moz-transform", "rotate("+ currentHours*30 +"deg)");
$("#minutecontainer").css("-moz-transform", "rotate("+ (-currentHours*30 + currentMinutes*6) +"deg)");
$("#secondcontainer").css("-moz-transform", "rotate("+ (-(currentMinutes*6) + currentSeconds*6) +"deg)");

$("#hourcontainer").css("-transform", "rotate("+ currentHours*30 +"deg)");
$("#minutecontainer").css("-transform", "rotate("+ (-currentHours*30 + currentMinutes*6) +"deg)");
$("#secondcontainer").css("-transform", "rotate("+ (-(currentMinutes*6) + currentSeconds*6) +"deg)");

setInterval ( function() {
    var currentTime = new Date ( );
    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    var currentSeconds = currentTime.getSeconds ( );

    // Pad the minutes and seconds with leading zeros, if required
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

    // Choose either "AM" or "PM" as appropriate
    var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

    // Convert the hours component to 12-hour format if needed
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

    // Convert an hours component of "0" to "12"
    currentHours = ( currentHours == 0 ) ? 12 : currentHours;

    // set initial time
    $(".hour .face").html(currentHours);
    $(".minute...