<div class="parallax">
  <div class="layer layer-1"> Layer 1 </div>
  <div class="layer layer-2"> Layer 2 </div>
  <div class="layer layer-3"> Layer 3 </div>
</div>

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

.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200vh;
}

.layer-1 {
  transform: translateZ(0);
}

.layer-2 {
  transform: translateZ(-1px);
}

.layer-3 {
  transform: translateZ(-2px);
}