<div class="container">
    <div class="back side"></div>
    <div class="left side"></div>
    <div class="right side"></div>
    <div class="top side"></div>
    <div class="bottom side"></div>
    <div class="front side"></div>
</div>
BODY {
  perspective: 1000px;
  perspective-origin: center -5em;
  }

.side,
.container {
  width: 10em;
  height: 10em;
  }

.container {
  border: 2px dotted white;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
  }

.side {
  position: absolute;
  width: 10em;
  height: 10em;
  border: 1px solid orange;
  opacity: .7;
  }

.back {
  transform: translateZ(-5em);
  background: orange;
  }

.left {
  transform: translateX(-5em) rotateY(90deg);
  background: lightgreen;
  }

.right {
  transform: translateX(5em) rotateY(90deg);
  background: yellowgreen;
  }

.top {
  transform: translateY(-5em) rotateX(90deg);
  background: skyblue;
  }

.bottom {
  transform: translateY(5em) rotateX(90deg);
  background: steelblue;
  }

@keyframes rotate {
  100% {
    transform: rotateY(360deg);
  }
}

// Helpers

HTML, BODY {
    height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.