<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>
$side: 10em;

HTML, BODY {
  height: 100%;
  }
BODY {
  overflow: hidden;
  background: #000;
  perspective: 500px;
  perspective-origin: center center;
  }
.container {
  position: absolute;
  top: -1em;
  bottom: -1em;
  left: -1em;
  right: -1em;
  margin: auto;
  width: $side;
  height: $side;
  transform-style: preserve-3d;
  animation: rotate 15s infinite linear;
  }
.side {
  position: absolute;
  width: $side;
  height: $side;
  overflow: hidden;
  background: linear-gradient( yellowgreen 1px, transparent 2px);
  background-size: 15px 15px;
  background-position: left bottom;
  animation: bg 5s infinite linear;
  }

.back {
  transform: translateZ(-$side/2);
  }
.front {
  transform: translateZ($side/2);
  }
.top {
  transform: translateY(-$side/2) rotateX(90deg);
  }
.bottom {
  transform: translateY($side/2) rotateX(90deg);
  }
.left {
  transform: translateX(-$side/2) rotateY(90deg);
  }
.right {
  transform: translateX($side/2) rotateY(90deg);
  }

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

@keyframes bg {
  50% {
    background-position: right top;
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.