CSS3 clock

by Ulrich Bangert

HTML

<div id="wrapper">
<div id="felge">
    <span class="speiche speiche1"></span>
     <span class="speiche speiche2"></span>
    <span class="speiche speiche3"></span>
     <span class="speiche speiche4"></span>
      <span class="speiche speiche5"></span>
     <span class="speiche speiche6"></span>   
        <span class="speiche speiche7"></span>
     <span class="speiche speiche8"></span>
   </div>
</div>

CSS

#wrapper {
  display:inline-block; 
  background-color: #aaa;
  border-radius: 50%;
  animation:dreh 2s infinite linear;
  }
 
@keyframes dreh {
    from {transform: rotate(  0deg); }
    to   {transform: rotate(360deg); }
}

#felge {
    position: relative;
  //  display: inline-block;
    width: 200px; height: 200px;
    border-radius:50%;
    border:10px solid red;
}
span {
    position: absolute;
    left:100px;
  transform-origin: bottom;
  z-index: -100;
}
.speiche{ box-shadow: black 0 0 0 5px; height: 100px; top: 1
00px; }
 .speiche1{ transform: rotate(45deg);}
  .speiche2{ transform: rotate(90deg);}
  .speiche3{ transform: rotate(135deg);}
  .speiche4{ transform: rotate(180deg);}
  .speiche5{ transform: rotate(225deg);}
  .speiche6{ transform: rotate(270deg);}
  .speiche7{ transform: rotate(315deg);}
  .speiche8{ transform: rotate(360deg);}