<div class="parallax">
  <div class="group">
    <div class="layer layer-1"> Layer 1.1 </div>
    <div class="layer layer-2"> Layer 1.2 </div>
    <div class="layer layer-3"> Layer 1.3 </div>
  </div>
  <div class="group">
    <div class="layer layer-1"> Layer 2.1 </div>
    <div class="layer layer-2"> Layer 2.2 </div>
    <div class="layer layer-3"> Layer 2.3 </div>
    <div class="layer layer-4"> Layer 2.4 </div>
  </div>
  <div class="group">
    <div class="layer layer-1"> Layer 3.1 </div>
    <div class="layer layer-2"> Layer 3.2 </div>
    <div class="layer layer-3"> Layer 3.3 </div>
  </div>
</div>

<button id="debug-button" type="button">
  Toggle Debug Mode
</button>

.parallax {
  perspective: 300px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.group {
  height: 100vh;
  transform-style: preserve-3d;
  margin: 20px;
  transition: all 0.5s;
}

.debug-on .group {
  transform: translate3d(500px, 0, -800px) rotateY(30deg);
}

.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  box-shadow: 0 0 5px rgba(0, 0, 0);
}

.layer-1 {
  transform: translateZ(0);
  background: rgba(255, 0, 0, 0.1);
  z-index: 4;
}

.layer-2 {
  transform: translateZ(-100px);
  background: rgba(255, 0, 0, 0.3);
  z-index: 3;
}

.layer-3 {
  transform: translateZ(-200px);
  background: rgba(255, 0, 0, 0.5);
  z-index: 2;
}

.layer-4 {
  transform: translateZ(-300px) scale(2);
  background: rgba(255, 0, 0, 0.7);
  z-index: 1;
}

#debug-button {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
}

document.querySelector("#debug-button").addEventListener("click", () => {
  const parallaxContainer = document.querySelector(".parallax");

  if (parallaxContainer.classList.contains("debug-on")) {
    parallaxContainer.classList.remove("debug-on");
  } else {
    parallaxContainer.classList.add("debug-on");
  }
});