Pure CSS 3D Cube

by orlovsky

HTML

<div class="stage" style="width: 120px; height: 120px;">
<div class="cubespinner"> 
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6"><img src="/images/homer.jpg"></div>
</div>
</div>

CSS

@-webkit-keyframes spincube {
  from,to  { }
  16%      { -webkit-transform: rotateY(-90deg);  }
  33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
  50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
  66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
  83%      { -webkit-transform: rotateX(90deg); }
}
@-moz-keyframes spincube {
  from,to  { }
  16%      { -moz-transform: rotateY(-90deg);  }
  33%      { -moz-transform: rotateY(-90deg) rotateZ(90deg); }
  50%      { -moz-transform: rotateY(-180deg) rotateZ(90deg); }
  66%      { -moz-transform: rotateY(90deg) rotateX(90deg);  }
  83%      { -moz-transform: rotateX(90deg); }
}
-ms-keyframes spincube {
  from,to  { }
  16%      { -ms-transform: rotateY(-90deg);  }
  33%      { -ms-transform: rotateY(-90deg) rotateZ(90deg); }
  50%      { -ms-transform: rotateY(-180deg) rotateZ(90deg); }
  66%      { -ms-transform: rotateY(90deg) rotateX(90deg);  }
  83%      { -ms-transform: rotateX(90deg); }
}

.cubespinner {
  -webkit-animation-name: spincube;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 12s;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 60px 60px 0;
  -moz-animation-name: spincube;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 12s;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: 60px 60px 0;
  -ms-animation-name: spincube;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 12s;
  -ms-transform-style: preserve-3d;
  -ms-transform-origin: 60px 60px 0;
}

.cubespinner div {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
  background: rgba(255,255,255,0.8);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
  text-align: center;
  font-size: 100px;
}

.cubespinner .face1 {
  -webkit-transform:...