<h1>A Simple Analog Clock</h1>
<div id="clock">
  <div id="secondHand" class="hand"></div>
  <div id="minuteHand" class="hand"></div>
  <div id="hourHand" class="hand"></div>
</div>

body {
  background-color: #232329;
  color: #fff;
  padding-top: 60px;
}
h1 {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}


#clock {
  width: 220px;
  height: 220px;
  border-radius: 100%;  
  margin: 40px auto;
  position: relative;  
  background-color: #fff;
  background-image: url('http://azmind.com/demo/analog-jquery-clock/images/clock.png');
  background-size: 250px;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  cursor: pointer;
  .hand {
    width: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1px;
    -webkit-backface-visibility: hidden;
    transform-origin: bottom center;    
  }
  #secondHand {
    height: 70px;
    background-color: #999;  
    margin-top: -70px; 
    z-index: 3; 
  }

  #minuteHand { 
    height: 50px;
    background-color: #222;
    margin-top: -50px;
    z-index: 2;  
  }

  #hourHand {
    background-color: #222;
    height: 40px; 
    margin-top: -40px; 
    z-index: 1;
  }
  &:after {
    content: ' ';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -5px;
    margin-top: -5px;
    z-index: 5;
  }
}

function tick() {
  var d = new Date();  
  var h, m, s;
  var $s = $('#secondHand');
  var $m = $('#minuteHand');
  var $h = $('#hourHand');

  h = 30 * (d.getHours() % 12 + d.getMinutes() / 60);
  m = 6 * (d.getMinutes() + (d.getSeconds() / 60));
  s = (d.getSeconds() + (d.getMilliseconds() / 1000)) * 6

  $s.css({
    transform: "rotate(" + s + "deg)"
  });
  $m.css({
    transform: "rotate(" + m + "deg)"
  });
  $h.css({
    transform: "rotate(" + h + "deg)"
  });
  window.requestAnimationFrame(tick);
}
tick();