<div id="scene">
  <div class="camera-arm z">
    <div class="camera-arm x">
      <div class="camera-arm y">
        <div id="world">
          <div class="box">
            <div class="face top"></div>
            <div class="face left"></div>
            <div class="face front"></div>
            <div class="face right"></div>
            <div class="face back"></div>
            <div class="face bottom"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
:root {
  --camera-full-cycle-duration: 10s;
}

html, body, #scene, .camera-arm, #world {
  height: 100%;
  width: 100%;
}
 
#scene {
  perspective: 500px;
}

.camera-arm {
  transform-style: preserve-3d;
}
 
.camera-arm.z {
  animation: camera-arm-z-zoom var(--camera-full-cycle-duration) infinite;
}

@keyframes camera-arm-z-zoom {
  0% {
    transform: translateZ(0);
  }
  50% {
    transform: translateZ(250px);
  }
  100% {
    transform: translateZ(0);
  }
}

.camera-arm.y {
  animation: camera-arm-y-rotation var(--camera-full-cycle-duration) linear infinite;
}

@keyframes camera-arm-y-rotation {
  0% {
    transform: rotateY(-45deg);
  }
  50% {
    transform: rotateY(135deg);
  }
  100% {
    transform: rotateY(315deg);
  }
}

.camera-arm.x {
  animation: camera-arm-x-rotation var(--camera-full-cycle-duration) infinite;
}

@keyframes camera-arm-x-rotation {
  0% {
    transform: rotateX(-45deg);
  }
  50% {
    transform: rotateX(-25deg);
  }
  100% {
    transform: rotateX(-45deg);
  }
}

#world {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

#world * {
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  top: -50px;
  left: -50px;
  height: 100px;
  width: 100px;
  background-color: red;
  border: 1px solid black;
  transform-style: preserve-3d;
}

.face.top {
  transform: translateY(-50px) rotateX(90deg);
}

.face.left {
  transform: translateX(-50px) rotateY(-90deg);
}

.face.front {
  transform: translateZ(-50px) rotateY(180deg);
}

.face.right {
  transform: translateX(50px) rotateY(90deg);
}

.face.back {
  transform: translateZ(50px);
}

.face.bottom {
  transform: translateY(50px) rotateX(-90deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.