CSSだけで作るアナログ時計のデザイン

CSSといっても、ちゃんと正確な時刻を表示し、ちゃんと秒針もうごいています。
通常は、JavaScriptといったプログラムで時計は作ったりするのですが、

以下、XHTMLとCSSのソースです。

XHTML

<div id="clockbase">
	<div id="hours"></div>
	<div id="minutes"></div>
	<div id="seconds"></div>
</div>

CSS

#clockbase {
	width: 512px;
	height: 512px;
	position: relative;
	margin: 0 auto;
	background: url(clock_bg.jpg) no-repeat;
}
#minutes {
	width: 229px;
	height: 229px;
	position: absolute;
	top: 200px;
	left: 137px;
	background: url(minutes-arm.png) no-repeat;
}
#hours {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 220px;
	left: 150px;
	background: url(hours-arm.png) no-repeat left bottom;
}
#seconds {
	width: 260px;
	height: 260px;
	position: absolute;
	top: 184px;
	left: 120px;
	background: url(SECS.gif) no-repeat;

}
#clockbase .min05 {background-position: left top;}
#clockbase .min10 {background-position: left -229px;}
#clockbase .min15 {background-position: left -458px;}
#clockbase .min20 {background-position: left -687px;}
#clockbase .min25 {background-position: left -916px;}
#clockbase .min30 {background-position: left -1145px;}
#clockbase .min35 {background-position: left -1374px;}
#clockbase .min40 {background-position: left -1603px;}
#clockbase .min45 {background-position: left -1832px;}
#clockbase .min50 {background-position: left -2061px;}
#clockbase .min55 {background-position: left -2290px;}
#clockbase .min00 {background-position: left -2519px;}

#clockbase .hr1 {background-position: left top;}
#clockbase .hr2 {background-position: left -200px;}
#clockbase .hr3 {background-position: left -400px;}
#clockbase .hr4 {background-position: left -600px;}
#clockbase .hr5 {background-position: left -800px;}
#clockbase .hr6 {background-position: left -1000px;}
#clockbase .hr7 {background-position: left -1200px;}
#clockbase .hr8 {background-position: left -1400px;}
#clockbase .hr9 {background-position: left -1600px;}
#clockbase .hr10 {background-position: left -1800px;}
#clockbase .hr11 {background-position: left -2000px;}
#clockbase .hr12 {background-position: left -2200px;}

/*-- IE6用のPNGの変わりにGIFを使用--*/
*html #minutes {
	background: url(minutes-arm.gif) no-repeat;
}
*html #hours {
	background: url(hours-arm.gif) no-repeat left bottom;
}

非常にアイデア満載のCSSソースです。