<div class="scene">
  <div class="cube">
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="side front"></div>
  </div>
</div>
.scene {
  width: 300px;
  height: 300px;
  margin: 50px auto 0;
  perspective: 1200px;
}

.cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
}
.cube::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px dotted rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.side {
  position: absolute;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  border: 5px solid #9aa;
  visibility: hidden;
  background: rgba(221, 0, 0, 0.33);
  transition: transform 1s ease-out 1s, background 1s ease-out 1s;
}

.show-back .back {
  visibility: visible;
  transform: translateZ(-150px);
  background: rgba(32, 170, 151, 0.33);
}

.show-left .left {
  visibility: visible;
  transform: translateX(-150px) rotateY(90deg);
  background: rgba(153, 153, 153, 0.33);
}

.show-right .right {
  visibility: visible;
  transform: translateX(150px) rotateY(90deg);
  background: rgba(153, 153, 153, 0.33);
}

.show-top .top {
  visibility: visible;
  transform: translateY(-150px) rotateX(90deg);
  background: rgba(105, 136, 190, 0.33);
}

.show-bottom .bottom {
  visibility: visible;
  transform: translateY(150px) rotateX(90deg);
  background: rgba(105, 136, 190, 0.33);
}

.show-front .front {
  visibility: visible;
  transform: translateZ(150px);
  background: rgba(32, 170, 151, 0.33);
}
const scene = document.querySelector('.scene');

var step = 0;
function changeStep() {
  step++;
  if (step === 7) step = 0;
  scene.classList[step > 0 ? 'add' : 'remove']('show-back');
  scene.classList[step > 1 ? 'add' : 'remove']('show-left');
  scene.classList[step > 2 ? 'add' : 'remove']('show-right');
  scene.classList[step > 3 ? 'add' : 'remove']('show-top');
  scene.classList[step > 4 ? 'add' : 'remove']('show-bottom');
  scene.classList[step > 5 ? 'add' : 'remove']('show-front');
}

setInterval(changeStep, 3000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.