JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.perandersen.no/sandbox/fromAbove/jQueryRotate.2.2.js"></script>
<div class="clock">
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>
</div>
CSS
.clock{float:left;width:94px;height:94px;background-image:url(https://www.box.com/representation/f_7356717781/larger_thumb.jpg?updated=1365321732);background-repeat:no-repeat;border:none;position:relative;}
.hours{width:1px;height:30px;background-color:#fff;left:46px;top:40px;position:absolute;}
.minutes{width:1px;height:40px;background-color:#FF0000;left:46px;top:30px;position:absolute;}
.seconds{width:1px;height:50px;background-color:#0099FF;left:46px;top:25px;position:absolute;}
JavaScript
$(document).ready(function(){
var every_second = 1000;
var every_minute = 60000;
var every_twelve_minute = 60000;
setInterval(rotateSeconds,every_second);
setInterval(rotateMinutes,every_minute);
setInterval(rotateHours,every_twelve_minute);
});
var seconds_angle = 0;
function rotateSeconds() {
var element = $(".seconds");
if(seconds_angle < 360) {
seconds_angle = seconds_angle+5;
}
else {
seconds_angle = 0;
}
element.rotate(seconds_angle);
}
var minutes_angle = 0;
function rotateMinutes() {
var element = $(".minutes");
if(minutes_angle < 360) {
minutes_angle = minutes_angle+5;
}
else {
minutes_angle = 0;
}
element.rotate(minutes_angle);
}
var hours_angle = 0;
function rotateHours() {
var element = $(".hours");
if(hours_angle < 360) {
hours_angle = hours_angle+1.25;
}
else {
hours_angle = 0;
}
element.rotate(hours_angle);
}