Alexander Hanke

<div class="container-cube">
  <div class="cube">
    <div class="face front">Vorne</div>
    <div class="face back">Hinten</div>
    <div class="face right">Rechts</div>
    <div class="face left">Links</div>
    <div class="face top">Oben</div>
    <div class="face bottom">Unten</div>
  </div>
</div>

.container-cube {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 12s infinite linear;  
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #4D4946;
  line-height: 200px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #F8F8F8;
  background: RGBA(164, 181, 85, 0.6);
}

.front  {transform: rotateY(  0deg) translateZ(100px);}
.back   {transform: rotateY(180deg) translateZ(100px);}
.left   {transform: rotateY(-90deg) translateZ(100px);}
.right  {transform: rotateY( 90deg) translateZ(100px);}
.top    {transform: rotateX( 90deg) translateZ(100px);}
.bottom {transform: rotateX(-90deg) translateZ(100px);}

@keyframes spin {
  from {transform: rotateX(0deg) rotateY(0deg);}
  to   {transform: rotateX(360deg) rotateY(360deg);}
}