<div class="container">
  <div class="cube">
    <div class="front"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>
@import "compass";

$size: 200;

body {
  background: #4d97ff;  
}

.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  
  perspective:  800px;
	perspective-origin: 50%  100px;
}

.cube {
  position: relative;
  width: $size + px;
  
  top: 50%;
  left: 50%;
  margin-left: -$size/2 + px;
  margin-top: -$size/2 + px;
	
	transform-style: preserve-3d;
  animation: rotateCube 60s linear infinite;
  transform-origin: center center;
  
  div {
    position: absolute;
    width: $size + px;
    height: $size + px;
    background: rgba(255, 181, 12, 0.5);
    border: 1px solid #000;
    box-sizing: border-box;
    
    &.right {
      transform: rotateY(-270deg);
      transform-origin: top right;
    }
    
    &.left {
      transform-origin: top left;
      transform: rotateY(270deg);
    }
    
    &.top {
      transform-origin: top center;
      transform: rotateX(90deg);
    }
    
    &.bottom {
      transform-origin: bottom center;
      transform: rotateX(-90deg);
    }
    
    &.front {
      transform: translateZ($size + px);
    }
  }

}

@keyframes rotateCube {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  50% {
    transform: rotateX(-360deg) rotateY(-360deg) rotateZ(-360deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900
  2. http://weloveiconfonts.com/api/?family=fontawesome

External JavaScript

This Pen doesn't use any external JavaScript resources.