HTML, BODY {
  height: 100%;
  overflow: hidden;
}

BODY {
  background: #000;
  perspective: 500px;
  perspective-origin: center center;
  font-size: 10px;
}

.container {
  position: absolute;
  top: -0.5em;
  bottom: -0.5em;
  left: -0.5em;
  right: -0.5em;
  margin: auto;
  width: 15em;
  height: 15em;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

.side2 {
  position: absolute;
  width: 22em;
  height: 22em;
  overflow: hidden;
  background: repeating-linear-gradient( orange 2em, red 5%, yellow 30%, limegreen 40%, aqua 50%, blue 60%, blueviolet 70%, transparent 1.9em, transparent 3.9em) center center;
  background-size: 4em 4em;
  animation: bg 10s infinite linear;
}
.side1 {
  position: absolute;
  width: 44em;
  height: 44em;
  border-radius: 50%;
  border: 0.5em solid aqua;
  overflow: hidden;
  background-size: 4em 4em;
  animation: bgg 10s infinite linear;
}



.left1 {
  transform: translateX(-11em) rotateY(-90deg);
  
}
.left11 {
  transform: translateX(0em) rotateY(-45deg);
  
}

.right1 {
  transform: translateX(11em) rotateY(90deg);
  
}
.right11 {
  transform: translateX(0em) rotateY(-135deg);
  
}

.top1 {
  transform: translateY(-11em) rotateX(90deg);
  
}

.bottom1 {
  transform: translateY(11em) rotateX(-90deg);
  
}

.sphere1 {
  transform: translateX(-12em) translateY(-12em) translateZ(0em) rotateY(-90deg);
  
}
.sphere2 {
  transform: translateX(-12em) translateY(-12em) translateZ(0em) rotateY(-180deg);
  
}

@keyframes rotate {
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
@keyframes bg {
  50% {
    width: 18em;
    height: 18em;
    background-size: 8.5em 8.5em;
    border-radius: 2%;
  }
}
@keyframes bgg {
  50% {
    width: 40em;
    height: 40em;
    background-size: 17em 17em;
    border-radius: 50%;
  }
}