<div class="wrapper">
  <div class="cube">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
</div>
@keyframes spin {
  0% { 
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% { 
    transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}

html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
    width: 200px;
    height: 200px;
  .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(45deg);
    animation: spin 16s infinite linear;
    transform-style: preserve-3d;
    
    .side {
      position: absolute;
      z-index: 100;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 1px solid black;
      transform: translateZ(-100px);
      background: rgba(0,0,133,0.5);
    }
    .side:nth-child(2) {
      transform: translateZ(-100px) rotateY(-90deg);
      transform-origin: 0% 0%;
      background: rgba(0,133,0,0.5);
    }
    .side:nth-child(3) {
      transform: translateZ(-100px) rotateX(90deg);
      transform-origin: 0% 0%;
      background: rgba(133,0,0,0.5);
    }
    .side:nth-child(4) {
      transform: translateZ(-100px) rotateY(90deg);
      transform-origin: 100% 0%;
      background: rgba(0,133,0,0.5);
    }
    .side:nth-child(5) {
      transform: translateZ(-100px) rotateX(-90deg);
      transform-origin: 0% 100%;
      background: rgba(133,0,0,0.5);
    }
    .side:nth-child(6) {
      transform: translateZ(100px);
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.