CSS3 Animated Colored Cube

gistfile1.html

<section class="shell">
  <section class="cube">
    <section class="wall front">&nbsp;</section>
    <section class="wall back">&nbsp;</section>
    <section class="wall top">&nbsp;</section>
    <section class="wall bottom">&nbsp;</section>
    <section class="wall left">&nbsp;</section>
    <section class="wall right">&nbsp;</section>
  </section>
</section>

gistfile2.css

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

.shell {
  perspective: 500px;
  margin: -100px 0 0 -100px;
  background: radial-gradient(25% 25%, circle contain, white 0%, black 275%);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
}

.cube, .wall {
  width: 200px;
  height: 200px;
}

.cube .wall {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

.cube { transform-style: preserve-3d; }

.front {
  background: rgba(200, 0, 0, 0.5);
  transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 100px);
}

.back {
  background: rgba(0, 200, 0, 0.5);
  transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 100px);
}

.top {
  background: rgba(0, 0, 200, 0.5);
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 100px);
}

.bottom {
  background: rgba(200, 200, 0, 0.5);
  transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 100px);
}

.left {
  background: rgba(200, 0, 200, 0.5);
  transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 100px);
}

.right {
  background: rgba(0, 200, 200, 0.5);
  transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px);
}

.cube { animation: boxAnimation 10s ease-in infinite; }

@keyframes boxAnimation {
  0% { transform: rotate3d(0, 1, 0, 0deg); }
  25% { transform: rotate3d(0, 1, 0, 360deg); }
  50% { transform: rotate3d(1, 0, 0, 0deg); }
  75% { transform: rotate3d(1, 0, 0, 360deg); }
}