CodePen

HTML

            
              <div id="cont-cubo">
  <div class="cubo">
    <div class="cara1"><img alt="" src="http://1.bp.blogspot.com/-dg3Ujg94M8o/T3iUgzKPFbI/AAAAAAAAANU/hvouizMCJJs/s400/pao-1.JPG"></div>
    <div class="cara2"><img alt="" src="http://2.bp.blogspot.com/-sL72q4Xn5d8/T3iUg2OsW7I/AAAAAAAAANg/-rGcwUVjFUk/s400/pao-2.JPG"></div>
    <div class="cara3"><img alt="" src="http://1.bp.blogspot.com/-KFL4oD-xAj8/T3iUhdtZWkI/AAAAAAAAANs/Ue9FOYRSiNY/s400/pao-3.JPG"></div>
    <div class="cara4"><img alt="" src="http://2.bp.blogspot.com/-XaagfN3nLvE/T3iUhrKFEPI/AAAAAAAAAN4/Ei4WzzEG8wE/s400/pao-4.JPG"></div>
    <div class="cara5"><img alt="" src="http://2.bp.blogspot.com/-W7F3_kYqL8Y/T3iUh3q0iZI/AAAAAAAAAOA/JeKbVGzcVSw/s400/pao-5.JPG"></div>
    <div class="cara6"><img alt="" src="http://4.bp.blogspot.com/-Hozl7gLEww0/T3iVWidXIqI/AAAAAAAAAOQ/peUYSvPP9fU/s400/pao-6.JPG"></div>
  </div>
</div>
      <p>Question: Chrome has not fixed its bug with 'transform-style: preserve-3d;' ... ?!!!</p>
      <p>Or maybe I'm doing something wrong ... ?!!!</p>      
      <h1>My old 3D cube (double spin)</h1>
      <p>From the past: <a href='http://ksesocss.blogspot.com/2012/04/css3-transform-3d-guia-de-inicio-y-uso.html'>1 de abril de 2012</a></p>
      
      <h2>Créditos:</h2>
      <p>
Las imágenes obra de la artista bonaerense <a href="http://www.twitter.com/Pao_paint">Paola Magariños</a>. Puedes verlas en su página <a href="http://www.autosconarte.com">Autos con Arte</a><br>
Para el cubo y su rotación en trabajos varios: varios autores, varias páginas. Por ejemplo:<br>
<a href="http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/">Paul Hayes</a>.<br>
<a href="http://desandro.github.com/3dtransforms/docs/cube.html">David DeSandro</a>.<br>
<a href="http://www.cssplay.co.uk/menu/css3-cubes.html">Stu Nicholls</a></p>
            
          
!

CSS

            
              html { background-image: url("http://2.bp.blogspot.com/-iCCUn-fktvk/UYVomjPC84I/AAAAAAAAAAc/czlS_SMG-rs/s1600/noise.png"), linear-gradient(to right, #444444, #164C88);
  font-family: monospace;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.5;
}
a {color:#FF7361;}
#cont-cubo {
margin:100px auto;
perspective:600px;
animation:cont-cubo 10s infinite linear; linear;
}
.cubo {
position: relative;
margin: 0 auto;
height: 200px;
width: 200px;
animation:giro 25s infinite linear;
transform-style:preserve-3d;
}
.cubo div {
position: absolute;
height: 200px;
width: 200px;
-moz-cubo-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); /* Firefox anti aliasing */
animation:rotate 15s infinite linear;
}
.cubo div img {
  width:200px;
  height:200px;
  border-radius:200px;
  margin: 0; padding: 0; border: 0 none transparent;
animation:rot 5s infinite linear;
}
.cubo div.cara1 {
background:rgba(0,102,153,.5);
transform:translateZ(100px);
}
.cubo div.cara2 {
background:rgba(150,153,0,.7);
transform:rotateY(90deg) translateZ(100px);
}
.cubo div.cara3 {
background:rgba(39,116,61,.7);
transform:rotateY(180deg) translateZ(100px);
}
.cubo div.cara4 {
background:rgba(105,136,165,.7);
transform:rotateY(-90deg) translateZ(100px);
}
.cubo div.cara5 {
background:rgba(223,48,48,.7);
transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cubo div.cara6 {
background:rgba(144,153,102,.7);
transform:rotateX(90deg) translateZ(100px);
}
@keyframes giro {
  0% {transform: rotateX(0deg)   rotateY(0deg);}
  100% {transform: rotateX(1080deg) rotateY(360deg);
  }
}
@keyframes rot {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
 }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................