<div class="container">
  <div class="scene">
    <div class="sides">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
					    </div>
  </div>
</div>
.container {
  position: relative;
  width: 420px;
  height: 360px;
  margin: 20px auto 0;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 400px;
  perspective-origin: 50% 50%;
  animation: example 9s linear infinite;
}

.sides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  flex-wrap: wrap;
}

.sides div {
  width: 120px;
  height: 100px;
  margin: 10px;
  background: #6988BE;
}

.sides div:first-child,
.sides div:last-child {
  margin: 10px 150px;
}

.sides div:first-child {
  transform: rotateX(-45deg);
}
.sides div:nth-child(2) {
  transform: rotateY(45deg);
}
.sides div:nth-child(4) {
  transform: rotateY(-45deg);
}
.sides div:last-child {
  transform: rotateX(45deg);
}

@keyframes example {
  0% { perspective: 400px; }
  12.5% { perspective: 200px; }
  25% { perspective: 200px; }
  37.5% { perspective: 400px; }
  50% { perspective: 400px; }
  62.5% { perspective: 1200px; }
  75% { perspective: 1200px; }
  87.5% { perspective: 400px; }
  100% { perspective: 400px; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.