<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: 25em;
$side-small: 25em;
$bg-size: 6em;

$color-1: gold;
$color-2: transparent;
$color-3: crimson;

@mixin gradient($color: $color-1){
  background: radial-gradient( $bg-size circle 
    at center, 
    $color-2 20%, 
    $color 20%, $color 25%,
    $color-2 25.2%, $color-2 40%,
    $color 40%, $color 45%,
    $color-2 45.2%, $color-2 60%,
    $color 60%, $color 65%,
    $color-2 65.2%, $color-2 80%,
    $color 80%, $color 85%,
    $color-2 85.2%
  ) center center no-repeat;
}

HTML, BODY {
  height: 100%;
  overflow: hidden;
  }
BODY {
  background: #000;
  perspective: 500px;
  perspective-origin: center center;
  font-size: 10px;
  }
.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-small;
  height: $side-small;
  transform-style: preserve-3d;
  @include gradient(greenyellow);
  }

.side:before {
  content: "";
  display: block;
  position: absolute;
  width: $side-small;
  height: $side-small;
  overflow: hidden; 
  @include gradient(honeydew);
  transform: translateX(-$side/2) rotateY(-45deg) translateZ(-$side/5);
  perspective-origin: bottom center;
 }

.side:after {
  content: "";
  display: block;
  position: absolute;
  width: $side-small;
  height: $side-small;
  overflow: hidden; 
  @include gradient(turquoise);
  transform: translateX($side/2) rotateY(45deg) translateZ(-$side/5);
  }

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

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