CSS Transform Parallax Scrolling Effect

CSS-Only Parallax with Transforms

A parallax scrolling effect makes background layers move slower than foreground layers, creating an illusion of depth. CSS transforms can achieve this without any JavaScript.

The CSS

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

.parallax-layer {
  position: absolute;
  inset: 0;
}

.parallax-back {
  transform: translateZ(-1px) scale(2);
}

.parallax-front {
  transform: translateZ(0);
}

How It Works

1. The container has perspective: 1px, creating a 3D context.
2. The background layer is pushed back with translateZ(-1px).
3. Because it is further from the viewer, it appears to move slower when scrolling.
4. scale(2) compensates for the size reduction caused by the distance.

Scale Compensation Formula

When you push a layer back by d pixels with perspective p:

scale = (p + d) / p

For perspective: 1px and translateZ(-1px):

scale = (1 + 1) / 1 = 2

Multiple Depth Layers

.layer-far  { transform: translateZ(-2px) scale(3); }
.layer-mid  { transform: translateZ(-1px) scale(2); }
.layer-near { transform: translateZ(0); }

Browser Considerations

This pure CSS technique works in all modern browsers. However, overflow: hidden on the container can interfere with sticky positioning inside parallax sections. Test thoroughly with your specific layout.