<center>
  <div id="analog-clock-face">
    <div class="clock-hand" id="hour-hand"></div>
    <div class="clock-hand" id="min-hand"></div>
    <div class="clock-hand" id="secs-hand"></div>
    <div id="center"></div>

    <div class="time-mark" id="mark12"></div>
    <div class="time-mark" id="mark3"></div>
    <div class="time-mark" id="mark6"></div>
    <div class="time-mark" id="mark9"></div>
  </div>
</center>

body
{
    background: #fff;
}

#analog-clock-face
{
  position: relative;
  margin-top: 100px;
  width: 320px;
  height: 320px;
  border-radius: 320px;
  border: 25px solid #333;
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#999 100%);
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
}

#analog-clock-face .time-mark
{
  width: 5px;
  height: 10px;
  position: absolute;
  background: #333;
}

#analog-clock-face #mark12
{
  top: 0px;
  left: 162.5px;
}

#analog-clock-face #mark3
{
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  top: 160px;
  right: 0px;
}

#analog-clock-face #mark6
{
  bottom: 0px;
  left: 162.5px;
}

#analog-clock-face #mark9
{
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  left: 0px;
  top: 160px;
}

#analog-clock-face .clock-hand
{
  bottom: 145px;
  outline: 1px solid transparent;
}

#analog-clock-face #center
{
  position: absolute;
  top: 161px;
  left: 161px;
  width: 2px;
  height: 2px;
  border-radius: 1000px;
  border: 3px solid red;
  background: #ddd;
  z-index: 4;
}

#analog-clock-face #secs-hand
{
  width: 2px;
  height: 90px;
  position: absolute;
  left: 164px;
  background: red;
  transform-origin: 50% 80px;
  -webkit-transform-origin: 50% 80px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  z-index: 3;
  animation: secs-hand-anim 60s linear infinite;
  -webkit-animation: secs-hand-anim 60s linear infinite;
}

#analog-clock-face #min-hand
{
  width: 3px;
  height: 80px;
  position: absolute;
  left: 163.5px;
  background: #3399ff;
  transform-origin: 50% 70px;
  -webkit-transform-origin: 50% 70px;
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  z-index: 2;
  animation: min-hand-anim 3600s linear infinite;
  -webkit-animation: min-hand-anim 3600s linear infinite;
}

#analog-clock-face #hour-hand
{
  width: 6px;
  height: 60px;
  position: absolute;
  left: 162px;
  background: #3399ff;
  transform-origin: 50% 50px;
  -webkit-transform-origin: 50% 50px;
  transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  z-index: 1;
  animation: hour-hand-anim 43200s linear infinite;
  -webkit-animation: hour-hand-anim linear 43200s infinite;
}

@keyframes secs-hand-anim
{
  to
  {
    transform: rotate(540deg);
  }
}

@keyframes min-hand-anim
{
  to
  {
      transform: rotate(420deg);
  }
}

@keyframes hour-hand-anim
{
  to
  {
      transform: rotate(660deg);
  }
}

@-webkit-keyframes secs-hand-anim
{
  to
  {
    -webkit-transform: rotate(540deg);
  }
}

@-webkit-keyframes min-hand-anim
{
  to
  {
      -webkit-transform: rotate(420deg);
  }
}

@-webkit-keyframes hour-hand-anim
{
  to
  {
      -webkit-transform: rotate(660deg);
  }
}