JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<div id="clock">
        <div id="hour"><img src="images/hourHand.png" /></div>
        <div id="minute"><img src="images/minuteHand.png" /></div>
        <div id="second"><img src="images/secondHand.png" /></div>
</div>
<script>
function startClock() {
        var angle = 360/60;
        var date = new Date();
        var hour = date.getHours();
        if(hour > 12) {
                hour = hour - 12;
        }
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var hourAngle = (360/12)*hour + (360/(12*60))*minute;
        $('minute').setStyle('-webkit-transform: rotate('+angle*minute+'deg)');
        $('second').setStyle('-webkit-transform: rotate('+angle*second+'deg)');
        $('hour').setStyle('-webkit-transform: rotate('+hourAngle+'deg)');
}
</script>

CSS

#clock {
position: relative;
width: 378px;
height: 378px;
background-image: url('../images/clockFace.png');
left: 50%;
margin: 5em 0 0 -189px;
}
#clock div {
position: absolute;
}

#clock img[src*='hour'] {
-webkit-transform: rotate(90deg);
}

#clock img[src*='second'] {
/* -webkit-transition: property duration timing-function */
-webkit-transition: -webkit-transform 60s linear;
}

#clock:target img[src*='second'] {
-webkit-transform: rotate(360deg);
}


#clock img[src*='second'] {
-webkit-transition: -webkit-transform 600000s linear;
}

#clock:target img[src*='second'] {
-webkit-transform: rotate(3600000deg);
}

#clock img[src*='minute'] {
-webkit-transition: -webkit-transform 360000s linear;
}

#clock:target img[src*='minute'] {
-webkit-transform: rotate(36000deg);
}