<input id="manual" type="checkbox"> <label for="manual">Interactive mode (mouse hover)</label>
<div class="cube" id="red">
  <div class="face">R</div>
  <div class="face">r</div>
</div>

<div class="cube" id="green">
  <div class="face">G</div>
  <div class="face">g</div>
</div>

<div class="cube" id="blue">
  <div class="face">B</div>
  <div class="face">b</div>
</div>

body, html {
  height: 100%;
  color: #fff;
}

body {
  font: bold 90%/1.2 Arial;
  perspective: 500px;
  background: #000;
  text-align: center;
}

/* cube */

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align:center;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-position: 0 100%;
  background-size: 100% 400%;
  backface-visibility: hidden;
  transition: background-position 1s;
  font-size: 600%;
  color: #000;
}

/* transform the faces and use a big grad for shading */

.face:first-child {
  transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
  background-image: linear-gradient(rgba(0,0,0,1) 10%, rgba(0,0,0,0) 66%);
}
.face:last-child {
  transform: translateY(50%) rotateX(-90deg) ;
  background-image: linear-gradient(rgba(0,0,0,0) 33%, rgba(0,0,0,1) 90%);
}


/* some test candidates */

#red {
  left: 25%;
}
#red .face {
  background-color: #c33;
}
#green {
  left: 50%;
  z-index: 1;
}
#green .face {
  background-color: #ad3;
}
#blue {
  left: 75%;
}
#blue .face {
  background-color: #3ac;
}

/* use the checkbox to toggle manual / autoplay */

/* auto-play */
#manual:not(:checked) ~ .cube {
  animation: rotate 1s alternate infinite ease-in-out;
}
#manual:not(:checked) ~ .cube .face {
  animation: shade 1s alternate infinite ease-in-out;
}
@keyframes rotate {
  to { transform: translateZ(-100px) rotateX(90deg); }
}
@keyframes shade {
  to { background-position: 0 0 }
}


/* hover to animate */
#manual:checked ~ .cube:hover {
  transform: translateZ(-100px) rotateX(90deg);
}
#manual:checked ~ .cube:hover > .face:first-child,
  #manual:checked ~ .cube:hover > .face:last-child {
    background-position: 0 0
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.