Exhibit 11 of 17
Depth
Scroll inside the picture. The back wall barely moves, the shelf drifts and the bench slides past, because each layer is further away in real 3D.
The exhibit
Scroll inside the picture. The wall stays nearly still, the shelf drifts and the bench slides past.
Three layers, one scroll box, no script.
How it works
The scene is a scroll box with perspective: 1px. Each layer is pushed back with translateZ, which makes it look smaller and move slower as the box scrolls, then scaled back up by 1 + its depth so it looks its original size. The result is parallax with no scroll events and no scroll-driven animation: just 3D transforms, which every browser has had for years.
The key CSS
Cut from this exhibit’s stylesheet as it is served.
.x-parallax .scene {
overflow-x: hidden; overflow-y: auto;
perspective: 1px; perspective-origin: 50% 0; /* one pixel of depth: very strong 3D */
transform-style: preserve-3d;
}
.x-parallax .layer { transform-origin: 50% 0; }
/* push each layer back, then scale it up so it looks the same size: scale = 1 + depth */
.x-parallax .far { transform: translateZ(-3px) scale(4); }
.x-parallax .mid { transform: translateZ(-1.5px) scale(2.5); }
.x-parallax .near { transform: translateZ(-.5px) scale(1.5); }
/* parallax is movement you didn't ask for: flatten it for reduced motion */
@media (prefers-reduced-motion: reduce) {
.x-parallax .layer { transform: none; }
}Accessibility
Parallax is motion you didn’t ask for, and it can make people feel ill. Under prefers-reduced-motion: reduce the layers are flattened and it scrolls like a plain picture. The scene is a focusable, labelled region; the layers are decoration.
Browser support
3D transformsWorks in this browser.Not in this browser: Universal. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.