Inspired by a christmas tree decoration

by codepo8

HTML

<div id="logos">
  <a id="cube" href="https://developer.mozilla.org/en/HTML/HTML5">
    <span></span>
  </a>
</div>

CSS

#logos {
  position:absolute;  top: 0px;  left: 150px;  -moz-perspective: 800px;
   -ms-perspective: 800px;
   -webkit-perspective: 800px;
   -o-perspective: 800px;
   perspective: 800px; 
}
#cube {
  display: block;  position: relative;  margin: 30px auto;
  height: 200px;  width: 200px;
  -moz-transform-style: preserve-3d;
  -moz-transform:rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
  -ms-transform-style: preserve-3d;
  -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
  -o-transform-style: preserve-3d;
  -o-transform: rotateX(0) rotateY(0) rotateZ(0);
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0) rotateZ(0);

}
#cube span{
  position: absolute;  height: 200px;  width: 200px;
  border: 1px solid #000;
  border-radius:200px;
}
#cube {
-moz-animation: rot 5s infinite linear;
-ms-animation: rot 5s infinite linear;
-webkit-animation: rot 5s infinite linear;
-o-animation: rot 5s infinite linear;
animation: rot 5s infinite linear;

}
@-moz-keyframes rot {
0% { -moz-transform: rotateY(0) rotateX(0) rotateZ(0);}
100% { -moz-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg) ;}
}
@-webkit-keyframes rot {
0% { -webkit-transform:  rotateY(0) rotateX(0) rotateZ(0) ;}
100% { -webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)  ;}
}
@-ms-keyframes rot {
0% { -ms-transform: rotateY(0) rotateX(0) rotateZ(0);}
100% { -ms-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)  ;}
}
@-o-keyframes rot {
0% { -o-transform: rotateY(0) rotateX(0) rotateZ(0) ;}
100% { -o-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)  ;}
}
@keyframes rot {
0% { transform: rotateY(0) rotateX(0) rotateZ(0);}
100% { transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)  ;}
}

JavaScript

var i = 100, s = null, x = 0, y = 0, z = 0,
      c = document.querySelector('#cube');
  
  while(--i){
    s = document.createElement('span');
    x = ~~(Math.random()*360);
    y = ~~(Math.random()*360);
    z = ~~(Math.random()*360);
    
    s.style.webkitTransform = s.style.MozTransform = s.style.oTransform =
    s.style.msTransform = s.style.Transform = 
    'rotateX('+x+'deg) rotateY('+y+'deg) rotateZ('+z+'deg)';
    s.style.borderColor = 'hsl('+x+',50%,50%)';
    c.appendChild(s);
  }