<figure>
  <div class="clock">
    <div class="twelve">12</div>
    <div class="three">9</div>
    <div class="six">6</div>
    <div class="nine">3</div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
    <div class="center"></div>
  </div>
</figure>

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
  box-sizing: border-box;
}

body {
  background: crimson;
}

figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border: 8px solid black;
  border-radius: 100%;
  background: gold;
  div {
    position: absolute;
    border-radius: 50px;
    transform: translate(-50%, -50%);
    font: 400 20px 'Montserrat';
  }
  
  .twelve {
    top: 20px;
    left: 50%;
  }
  .six {
    bottom: 0;
    left: 50%;
  }
  .three {
    top: 50%;
    left: 20px;
  }
  .nine {
    top: 50%;
    right: 10px;
  }
  .hour-hand, .minute-hand, .second-hand, {
    top: 50%;
    left: 50%;
    transform-origin: top center;
    background: black;
  }
  .hour-hand {
    width: 6px;
    height: 50px;
    transform: translateX(-50%) rotate(180deg);
  }
  .minute-hand {
    width: 4px;
    height: 65px;
    transform: translateX(-50%) rotate(180deg);
  }
  .second-hand {
    width: 2px;
    height: 75px;
    transform: translateX(-50%) rotate(180deg);
  }
  .center {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
  }
}

time = function() {
  var seconds = 180;
  var minutes = 180;
  var hours = 180;
  setInterval(function() {
    seconds++;
    $('.second-hand').css('transform', 'rotate(' + seconds + 'deg)');
    if(seconds === 540) {
      seconds = 180;
      minutes += 360/60;
      $('.minute-hand').css('transform', 'rotate(' + minutes + 'deg)');
    }
    if(minutes === 540) {
      minutes = 180;
      hours += 360/12;
      $('.hour-hand').css('transform', 'rotate(' + hours + 'deg)');
    }
  }, 10);
}

time();