Membuat Jam Analog dengan CSS3

<style type="text/css">

#clock {position: relative;width: 250px;height: 250px;background-image: url('Clock.JPG'); margin:50px auto;}

#clock div {position: absolute;}

#secondHand {
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:60s;
-moz-animation-name: seconds;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:60s;
-webkit-animation-name: seconds;
}
@-moz-keyframes seconds {
0% {-moz-transform: rotate(0deg)}
100% {-moz-transform: rotate(360deg)}
}
@-webkit-keyframes seconds {
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}

#minuteHand {
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:3600s;
-moz-animation-name: minutes;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:3600s;
-webkit-animation-name: minutes;
}
@-moz-keyframes minutes {
0% {-moz-transform: rotate(0deg)}
100% {-moz-transform: rotate(360deg)}
}
@-webkit-keyframes minutes {
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}

#hourHand {
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:43200s;
-moz-animation-name: hours;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:43200s;
-webkit-animation-name: hours;
}
@-moz-keyframes hours {
0% {-moz-transform: rotate(0deg)}
100% {-moz-transform: rotate(360deg)}
}
@-webkit-keyframes hours {
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}

</style>

<div id="info">

<h2>CSS3 - Analogue Clock</h2>

<h3>Maret 2012</h3>
<h2>For Safari, Chrome and Firefox 5+ ONLY - at the moment</h2>
<br />
<div id="clock">
<div id="hour"><img id="hourHand" src="Hour.JPG" /></div>
<div id="minute"><img id="minuteHand" src="Minute.JPG" /></div>
<div id="second"><img id="secondHand" src="Second.JPG" /></div>
</div>
<br /><br />

<script type="text/javascript">
/* <![CDATA[ */
var angle = 360/60;
var date = new Date();
var hour = date.getHours();
if(hour > 12) hour = hour - 12;
var minutehand = date.getMinutes();
var secondhand = date.getSeconds();
var hourhand = (360/12)*hour + (360/(12*60))*minutehand;
document.getElementById('minute').style.webkitTransform = "rotate("+angle*minutehand+"deg)";
document.getElementById('second').style.webkitTransform = "rotate("+angle*secondhand+"deg)";
document.getElementById('hour').style.webkitTransform = "rotate("+hourhand+"deg)";
document.getElementById('minute').style.MozTransform = "rotate("+angle*minutehand+"deg)";
document.getElementById('second').style.MozTransform = "rotate("+angle*secondhand+"deg)";
document.getElementById('hour').style.MozTransform = "rotate("+hourhand+"deg)";
/* ]]> */
</script>

</div> <!-- end info -->