<body>
  <div id="wrapper">
    <div class="box-area">
      <div id="box-front" class="box">
        <div class="strip">
        </div>
      </div>
      <div id="box-right" class="box">
        <div class="strip">
        </div>
        <div class="strip">
        </div>
      </div>
      <div id="box-back" class="box">
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
      </div>
      <div id="box-left" class="box">
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
      </div>
      <div id="box-top" class="box">
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
      </div>
      <div id="box-bottom" class="box box-6">

        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
        <div class="strip">
        </div>
      </div>
    </div>
  </div>
</body>
body {
  background:#000;
}
#wrapper {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  perspective:1000px;
}
.strip{
  width:10%;
  height:10%;
  margin:5px;
  border-radius:80px;
  background: rgba(0,0,0, 0.7);
}

.box-area {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

.box {
  display: flex;
  position: absolute;
  width: 400px;
  height: 400px;
  font-size:3rem;
  justify-content: center;
  align-items: center;
  background:white;
  zoom:0.8;
}

#box-front {
  transform: translateX(-200px) translateY(-200px) translateZ(200px);
}

#box-back {
  transform: translateX(-200px) translateY(-200px) translateZ(-200px);
}

#box-right {
  display:flex;
  transform: translateY(-200px) rotateY(90deg);
}

#box-left {
  justify-content:space-around;
  transform: translateY(-200px) translateX(-400px) rotateY(90deg);
}

#box-top {
  transform: translateX(-200px) translateY(-400px) rotateX(90deg);
}

#box-bottom {
  transform: translateX(-200px) rotateX(90deg);
}

.box-area {
  transform: rotateX(90deg) rotateY(90deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.