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); }
#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) ;} }
<div id="logos"> <a id="cube" href="https://developer.mozilla.org/en/HTML/HTML5"> <span></span> </a> </div>