.face
  .hour-hand
  .minute-hand
  .seconds-hand
  .center

body {
  background-color:#FFA963;
}

.face {
  margin:50px auto;
  border-radius:50%;
  background-color:white;
  height:100px;
  width:100px;
  position:relative;
}

.center {
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-4px;
  margin-left:-4px;
  border-radius:50%;
  height:8px;
  width:8px;
  background-color:#333;
}

.seconds-hand {
  position:absolute;
  left:50%;
  top:4px;
  margin-left:-1px;
  width:2px;
  height:45px;
  background-color:#F03C3C;
  transform-origin: bottom center;
}

.minute-hand {
  position:absolute;
  left:50%;
  top:4px;
  margin-left:-2px;
  width:4px;
  height:45px;
  background-color:#333;
  transform-origin: bottom center;
}

.hour-hand {
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-2px;
  margin-top:-30px;
  width:4px;
  height:30px;
  background-color:#333;
  transform-origin: bottom center; 
}

.smooth {
  transition: all 1s linear;
}

$(document).ready(function() {
  $('body').append('<div class="time">');
  
  Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
  return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
  }
  
  function rotate(element, degrees) {
    element.css({'transform' : 'rotate('+ degrees +'deg)'});
  }
  
  function setTime() {
    var date = new Date();
    var sec = date.getSeconds();
    var min = date.getMinutes();
    var hrs = date.getHours();
    
    var mapSec = sec.map(0, 59, 0, 360);
    var mapMin = min.map(0,59,0,360);
    var mapHrs = hrs.map(0,12,0,360);
    
    if (sec == 0) {
      $('.seconds-hand').removeClass('smooth');
    } else {
      $('.seconds-hand').addClass('smooth');
    }
    
    if (min == 0) {
      $('.minute-hand').removeClass('smooth');
    } else {
      $('.minute-hand').addClass('smooth');
    }
    
    if (hrs == 0) {
      $('.hour-hand').removeClass('smooth');
    } else {
      $('.hour-hand').addClass('smooth');
    }
      
    rotate($('.seconds-hand'), mapSec);
    rotate($('.minute-hand'), mapMin);
    rotate($('.hour-hand'), mapHrs);
  }
  
  setInterval(function() {setTime()}, 1);
});