<a target="_blank" href="https://codepen.io/magnus16/full/rbEju">
  Check out its spin-off.
</a>
<div class="container">
  <div class="cube">
    <div class="side side1"></div>
    <div class="side side2"></div>
    <div class="side side3"></div>
    <div class="side side4"></div>
    <div class="side side5"></div>
    <div class="side side6"></div>
  </div>
</div>
body{
  height:100vh;
}
.container{
  position:absolute;
  height:200px;
  width:200px;
  left:50%;
  top:50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-perspective:400px;
          perspective:400px;
}
.cube{
  height:200px;
  widht:200px;
  -webkit-transform-origin:50% 50%;
          transform-origin:50% 50%;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
  -webkit-animation:rotate 3s infinite ease-in-out;
          animation:rotate 3s infinite ease-in-out;
  
}
.side{
  position:absolute;
  display:block;
  height:200px;
  width:200px;
}
.side1{
  background:#41C3AC;
  -webkit-transform:translateZ(100px);
          transform:translateZ(100px);
}
.side2{
  background:#FF884D;
  -webkit-transform:rotateY(90deg) translateZ(100px);
          transform:rotateY(90deg) translateZ(100px);
}
.side3{
  background:#32526E;
  -webkit-transform:rotateY(180deg) translateZ(100px);
          transform:rotateY(180deg) translateZ(100px);
}
.side4{
  background:#65A2C5;
  -webkit-transform:rotateY(-90deg) translateZ(100px);
          transform:rotateY(-90deg) translateZ(100px);
}
.side5{
  background:#FFCC5C;
  -webkit-transform:rotateX(90deg) translateZ(100px);
          transform:rotateX(90deg) translateZ(100px);
}
.side6{
  background:#FF6B57;
  -webkit-transform:rotateX(-90deg) translateZ(100px);
          transform:rotateX(-90deg) translateZ(100px);
}

@-webkit-keyframes rotate{
  0%{
    -webkit-transform:rotateX(0deg) rotateY(0deg);
  }
  40%{
     -webkit-transform:rotateX(375deg) rotateY(0deg);
  }
  47%,50%{
     -webkit-transform:rotateX(360deg) rotateY(0deg);    
  }
  90%{
     -webkit-transform:rotateX(360deg) rotateY(375deg);
  }
  97%,100%{
     -webkit-transform:rotateX(360deg) rotateY(360deg);
  }
}
@keyframes rotate{
  0%{
    transform:rotateX(0deg) rotateY(0deg);
  }
  40%{
    transform:rotateX(375deg) rotateY(0deg);
  }
  47%,50%{
    transform:rotateX(360deg) rotateY(0deg);    
  }
  90%{
    transform:rotateX(360deg) rotateY(375deg);
  }
  97%,100%{
    transform:rotateX(360deg) rotateY(360deg);
  }
}

a{
  font-family:helvetica;
  color:#428bca;
  text-align:center;
  display:block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js