JSFiddle - React, Tailwind, and code Playground

by dannyjolie

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<div class="container">
  <div class="clock">
      <div class="hour"></div>
      <div class="minute"></div>
      <div class="second"></div>
  </div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#foo {
  position: absolute;
}

body {
  background-color: #e74c3c;
}
.container {
  margin: 40px auto 20px;
  width: 250px;
}
.clock {
  border: 5px solid #FFF;
  border-radius: 100%;
  display: block;
  height: 250px;
  width: 250px;
  position: relative;
}

.clock .hour, .clock .minute, .clock .second {
  background: #fff;
	height: 0;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 0;
  -webkit-transition: -webkit-transform 1s linear;
     -moz-transition: -moz-transform 1s linear;
       -o-transition: -o-transform 1s linear;
          transition: transform 1s linear;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.clock .hour {
  margin: -60px -2px 0;
  padding: 60px 2px 0;
}
.clock .minute {
  margin: -90px -2px 0;
  padding: 90px 2px 0;
}
.clock .second {
  margin: -105px -2px 0;
  padding: 105px 1px 0;
}

JavaScript

var counter = {
	s: 0,
  a: 0,
  o: 0
};

var previous = null;

function clock() { 
  var t = moment(),
      s = t.seconds() * 6,
      a = t.minutes() * 6,
      o = t.hours() % 12 / 12 * 360 + (a / 12);
      
  if(previous){
  	if(s < previous.s){
    	counter.s += 1;
    }
    if(a < previous.a){
    	counter.a += 1;
    }
    if(o < previous.o){
    	counter.o += 1;
    }
  }
  
  previous = {
  	s: s,
    a: a,
    o: o
  };
  
  $(".hour").css("transform", "rotate(" + (o + 360 * counter.o) + "deg)");
  $(".minute").css("transform", "rotate(" + (a + 360 * counter.a) + "deg)");
  $(".second").css("transform", "rotate(" + (s + 360 * counter.s) + "deg)");
}

setInterval(clock, 1000)