<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: 24.7em;

$color-1: deepskyblue;
$color-2: transparent;

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;
  //opacity: .7;
  animation: rotate 15s infinite linear;
  }
.side {
  position: absolute;
  width: $side-small;
  height: $side-small;
  overflow: hidden; 
  background: repeating-radial-gradient(
    at center, 
    $color-1 1em, 
    $color-2 1.7em, $color-2 1.8em) center center;
  background-size: 5em 5em;
  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% {
    width: $side*.2;
    height: $side*.2;
    background-size: $side/2 $side/2;
    border-radius: 10%;
  }
}