pure CSS3 Analog clock

by Dan Shahin

HTML

<!--
   Calculate the current time and these angles on server side:

   Let's say current time is: "18:20:10"   
   hourAngle = (_18_ % 12) * 30 +  _20_ * 0.5 // = 190deg
   minAngle = _20_ * 6 // = 120deg
   secAngle = _10_ * 6 // = 60deg
-->
<style>
.hour { -webkit-transform: rotate(190deg); -moz-transform: rotate(190deg); }
.min { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); }
.sec { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); }
</style>
<time datetime="18:20:10">
<span class="hour"><b>18</b></span>:<span class="min"><b>20</b></span>:<span class="sec"><b>10</b></span>
</time>

CSS

@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(-180deg) translate(-2px,-2px); }
    100% { -webkit-transform: rotate(180deg) translate(-2px,-2px); }
}
@-moz-keyframes rotate {
    0% { -moz-transform: rotate(-180deg) translate(-2px,-2px); }
    100% { -moz-transform: rotate(180deg) translate(-2px,-2px); }
}

@-webkit-keyframes rotatesec {
    0% { -webkit-transform: rotate(-180deg) translate(-2px,50px); }
    100% { -webkit-transform: rotate(180deg) translate(-2px,50px); }
}
@-moz-keyframes rotatesec {
    0% { -moz-transform: rotate(-180deg) translate(-2px,50px); }
    100% { -moz-transform: rotate(180deg) translate(-2px,50px); }
}

body { background: #069; }

time {
    background:#08b;
    border: 4px solid #fff;
    border-radius: 100%;
    width: 100px; height: 100px;
    display: block;
    font-size:0; text-indent: -3000em;
    position: relative;
}
time span, time span b { display: block; position: absolute; }
time span { width: 100%; height: 100%; left:0; top:0 }
time span b {
    background: #fff;
    border-radius: 100%;
    left:50%; top:50%;
    width: 4%;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}

time .sec b {
    background: #08b;
    height: 5%;
    -webkit-animation: rotatesec infinite 60s linear;
    -moz-animation: rotatesec infinite 60s linear;
}
time .min b {
    height: 50%;
    -webkit-animation: rotate infinite 3600s linear;
    -moz-animation: rotate infinite 3600s linear;
}
time .hour b {
    height: 30%;
    -webkit-animation: rotate infinite 86400s linear;
    -moz-animation: rotate infinite 86400s linear;
}