<div class="app">
   
  <div class="clock">

  <div class="clock-inner">

  <div class="clock-center"></div>
  <div class="clock-center2"></div>
  <div id="clock-seconds"></div>
  <div id="clock-minutes"></div>
  <div id="clock-hours"></div>

  </div> <!-- end clock-inner -->
  </div> <!-- end clock -->
  </div> <!-- end app -->

</div>

.app {
  text-align: center;
  background: #96d6df;
  height: 800px;
}

.clock {
  background: white;
  border-radius: 35px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* drop shadow */
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); /* drop shadow */
  height: 200px;
  top: 80px;
  margin: 0 auto;
  position: relative;
  width: 200px;
}

.clock-inner {
  background: white;
  border-radius: 50%;
  height: 140px;
  left: 50%;
  margin: -70px 0 0 -70px;
  position: absolute;
  top: 50%;
  width: 140px;
  border: 1px solid #999999;
}

.clock-center,
.clock-center2,
#clock-seconds,
#clock-minutes,
#clock-hours {
  left: 50%;
  position: absolute;
  top: 50%;
}

.clock-center2 {
  background: #de3d07;
  border-radius: 50%;
  height: 5px;
  margin: -2px 0 0 -2px;
  width: 5px;
  z-index: 6;
}

.clock-center {
  background: #1a1d24;
  border-radius: 50%;
  height: 12px;
  margin: -6px 0 0 -6px;
  width: 12px;
  z-index: 4;
}

#clock-seconds {
  background: #de3d07;
  height: 60px;
  margin: -60px 0 0 -1px;
  -webkit-transform-origin: 1px 60px;
  -moz-transform-origin: 1px 60px;
  -ms-transform-origin: 1px 60px;
  -o-transform-origin: 1px 60px;
  transform-origin: 1px 60px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  width: 2px;
  z-index: 7;
}

#clock-minutes {
  background: black;
  border-radius: 4px;
  height: 50px;
  margin: -50px 0px 0px -2px;
  -webkit-transform-origin: 2px 50px;
  -moz-transform-origin: 2px 50px;
  -ms-transform-origin: 2px 50px;
  -o-transform-origin: 2px 50px;
  transform-origin: 2px 50px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  width: 4px;
  z-index: 2;
}

#clock-hours {
  background: #1a1d24;
  border-radius: 4px;
  height: 35px;
  margin: -40px 0 0 -2px;
  -webkit-transform-origin: 2px 40px;
  -moz-transform-origin: 2px 40px;
  -ms-transform-origin: 2px 40px;
  -o-transform-origin: 2px 40px;
  transform-origin: 2px 40px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  width: 4px;
  z-index: 1;
}

(function() {

  var clockSeconds = document.getElementById('clock-seconds'),
  clockMinutes = document.getElementById('clock-minutes'),
  clockHours = document.getElementById('clock-hours');

  function getTime() {

  var date = new Date(),
  seconds = date.getSeconds(),
  minutes = date.getMinutes(),
  hours = date.getHours(),

  degSeconds = seconds * 360 / 60,
  degMinutes = (minutes + seconds / 60) * 360 / 60,
  degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

  clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
  clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
  clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
  }

  setInterval(getTime, 1000);
  getTime();

} ());