How far should pointer parallax rotate?

Keep it small, usually below 10 to 14 degrees. Large rotations make text hard to read and can move perceived hit targets away from the pointer.

Where should perspective be applied?

Apply perspective to the outer scene and preserve-3d to the inner stack. Putting perspective on each layer creates inconsistent projection.

Why does translateZ appear to do nothing?

The parent is probably flattening children. Add transform-style: preserve-3d to the stack that contains the z-translated layers.

Should layers change z-depth on every pointer move?

No. Keep each layer depth fixed and change only the camera rotation variables so the visual hierarchy remains stable.

What should reduced motion do for pointer parallax?

Disable live tilt and transitions, but keep the layered composition visible so the card does not become a blank fallback.

What should I verify before shipping this pattern?

Check that the preview card and showcase communicate the same start and end state, every inspector control visibly changes the animation, compare demos stay fixed-height and centered, and reduced motion preserves the information without running a substitute loop.

← Back to gallery

Pointer Preserve-3D Parallax Stack

A pointer-driven 3D stack that keeps child layers in one preserve-3d scene while CSS variables drive tilt, glare, and translateZ offsets without flattening the depth model.

Original clean-room implementation by Animation Patterns. Code examples are available under CC BY 4.0.

preserve-3dpointermovecss-varsparallaxtranslateZtransform-stylereduced-motion

Pointer vars · translateZ

Depth Stack

Pointer CSS variables drive a single 3D card stack without flattening child layers.

Blend layer · same scene

Glare Plane

Glare stays inside the transformed element, so highlight and content share perspective.

Background · foreground split

Scene Split

A small scene proves depth with separate Z planes and one perspective root.

Depth Stack

The stack tilts as one preserve-3d scene, while foreground badges use translateZ so the depth stays coherent.

Cycle duration4.2s

Motion intensity1.00x

Helped you ship something? 🐟 Send my cat a churu

/* Depth Stack: Pointer CSS variables drive a single 3D card stack without flattening child layers. */
.motion-parallax-depth-stack {
  --motion-duration: 4.2s;
  --motion-intensity: 1.00;
  width: min(100%, 18rem);
  min-height: 9rem;
  display: grid;
  place-items: center;
  perspective: 620px;
}

.motion-parallax-depth-stack__stack {
  position: relative;
  width: min(62%, 168px);
  height: 68px;
  transform-style: preserve-3d;
  animation: parallax-depth-stack-tilt var(--motion-duration) ease-in-out infinite;
  will-change: transform;
}

.motion-parallax-depth-stack__layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  backface-visibility: hidden;
  background:
    linear-gradient(135deg, #67e8f933, transparent 58%),
    rgba(15, 23, 42, .94);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #67e8f9 42%, transparent),
    0 16px 32px rgba(2, 6, 23, .28);
  color: color-mix(in srgb, #67e8f9 68%, white);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform-style: preserve-3d;
}

.motion-parallax-depth-stack__layer--back {
  transform: translate3d(-22px, 12px, -48px);
  opacity: .58;
}

.motion-parallax-depth-stack__layer--mid {
  transform: translate3d(-7px, 5px, -14px);
  opacity: .76;
}

.motion-parallax-depth-stack__layer--front {
  transform: translate3d(14px, -9px, 42px);
}

@keyframes parallax-depth-stack-tilt {
  0%, 100% {
    transform: rotateX(calc(7deg * var(--motion-intensity))) rotateY(calc(-12deg * var(--motion-intensity)));
  }
  50% {
    transform: rotateX(calc(-7deg * var(--motion-intensity))) rotateY(calc(12deg * var(--motion-intensity)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-parallax-depth-stack__stack {
    animation: none;
    transform: rotateX(6deg) rotateY(-10deg);
  }
}

How to make this

A pointer preserve-3d parallax stack maps bounded pointer coordinates to CSS variables, then rotates a fixed 3D layer stack without moving layout.

1<div class="parallax-card" tabindex="0">2  <div class="parallax-card__stack">3    <span class="parallax-card__layer" style="--z: -34px"></span>4    <span class="parallax-card__layer" style="--z: 0px"></span>5    <strong class="parallax-card__layer" style="--z: 42px">Depth</strong>6  </div>7</div>8 9<script>10const card = document.querySelector('.parallax-card');11card?.addEventListener('pointermove', (event) => {12  const rect = card.getBoundingClientRect();13  const x = (event.clientX - rect.left) / rect.width - 0.5;14  const y = (event.clientY - rect.top) / rect.height - 0.5;15  card.style.setProperty('--rx', `${(-y * 10).toFixed(2)}deg`);16  card.style.setProperty('--ry', `${(x * 14).toFixed(2)}deg`);17});18card?.addEventListener('pointerleave', () => {19  card.style.setProperty('--rx', '0deg');20  card.style.setProperty('--ry', '0deg');21});22</script>23 24<style>25.parallax-card {26  --rx: 0deg;27  --ry: 0deg;28  width: 18rem;29  aspect-ratio: 16 / 9;30  display: grid;31  place-items: center;32  perspective: 700px;33}34.parallax-card__stack {35  position: relative;36  width: 70%;37  height: 58%;38  transform-style: preserve-3d;39  transform: rotateX(var(--rx)) rotateY(var(--ry));40  transition: transform 160ms ease;41}42.parallax-card__layer {43  position: absolute;44  inset: 0;45  display: grid;46  place-items: center;47  border-radius: 1rem;48  transform: translateZ(var(--z));49  background: color-mix(in srgb, #67e8f9 18%, #0f172a);50  border: 1px solid rgba(103, 232, 249, .38);51}52@media (prefers-reduced-motion: reduce) {53  .parallax-card__stack {54    transform: none;55    transition: none;56  }57}58</style>

Annotated snippet

Line 11Pointer input only updates CSS variables. Layout dimensions and hit targets stay fixed while the camera changes.
PitfallHow far should pointer parallax rotate?
Keep it small, usually below 10 to 14 degrees. Large rotations make text hard to read and can move perceived hit targets away from the pointer.
Line 32Perspective belongs on the scene wrapper, not on each layer. That keeps the 3D projection consistent.
A flat rotate reads like skew. preserve-3d plus translateZ gives each layer an actual depth plane.
PitfallWhere should perspective be applied?
Apply perspective to the outer scene and preserve-3d to the inner stack. Putting perspective on each layer creates inconsistent projection.
Line 38Without preserve-3d, children flatten into the parent plane and translateZ stops communicating depth.
PitfallWhy does translateZ appear to do nothing?
The parent is probably flattening children. Add transform-style: preserve-3d to the stack that contains the z-translated layers.
Line 48Each layer owns a fixed z-depth. Pointer motion changes the camera, not the layer geometry.
PitfallShould layers change z-depth on every pointer move?
No. Keep each layer depth fixed and change only the camera rotation variables so the visual hierarchy remains stable.
Line 52Reduced motion flattens live tracking while leaving the stack readable as layered content.
PitfallWhat should reduced motion do for pointer parallax?
Disable live tilt and transitions, but keep the layered composition visible so the card does not become a blank fallback.

Other pitfalls

What should I verify before shipping this pattern?: Check that the preview card and showcase communicate the same start and end state, every inspector control visibly changes the animation, compare demos stay fixed-height and centered, and reduced motion preserves the information without running a substitute loop.

Advanced

Layer a tilt-driven specular highlight that lives on the same --rx/--ry stream

Both cells run the same 4s tilt cycle (the pointer is simulated by a @property-registered --rx/--ry keyframe so the compare can autoplay). BEFORE shows the base recipe — the 3D stack tilts but the surface stays uniformly lit, so it reads as a flat panel rotating. AFTER adds a pseudo-element overlay that consumes the same --rx/--ry: a gradient highlight rolls across the card and its opacity intensifies as the tilt magnitude grows via abs(). The card now reads as a physical surface catching ambient light at the steepest tilt angles.

View explanation and full code37 lines

The base recipe lets the pointer drive the 3D rotation through two custom properties (--rx, --ry) and a fixed layer stack. Premium product cards (Apple, Stripe, Linear) add a specular highlight on top of the stack that intensifies as the card tilts more steeply — the visual reward that makes a 3D surface feel like it is catching light. Add a single pseudo-element overlay that consumes the EXACT same --rx/--ry the pointer handler is already updating: the gradient direction tracks --ry, and the opacity scales with the tilt magnitude via abs(). No new JS, no new event listeners — the existing pointermove handler is what makes the highlight follow the cursor.

Append these rules inside the <style> block from the base snippet above.

1/* Advanced: tilt-driven specular highlight — extends the base recipe.2   Same --rx/--ry custom properties the base pointer handler updates,3   just consumed by an additional pseudo-element overlay. The gradient4   angle leans with --ry (left/right tilt) so the highlight band rolls5   across the card; the opacity scales with tilt magnitude through6   abs() so the card sits dark when flat and brightens as it tilts.7   Requires @property registration on --rx/--ry so calc/abs can read8   them as angles. */9@property --rx {10  syntax: '<angle>';11  inherits: true;12  initial-value: 0deg;13}14@property --ry {15  syntax: '<angle>';16  inherits: true;17  initial-value: 0deg;18}19.parallax-card__stack::before {20  content: "";21  position: absolute;22  inset: 0;23  border-radius: 1rem;24  pointer-events: none;25  transform: translateZ(50px);26  background: linear-gradient(27    calc(90deg + var(--ry) * 4),28    rgba(255, 255, 255, .65) 0%,29    rgba(255, 255, 255, 0) 55%30  );31  opacity: calc((abs(var(--rx)) + abs(var(--ry))) / 24deg);32  mix-blend-mode: screen;33  transition: opacity 160ms ease;34}35@media (prefers-reduced-motion: reduce) {36  .parallax-card__stack::before { opacity: 0; }37}

Notes

Overview

Pointer preserve-3d parallax is a depth illusion built from a real 3D stack, not a flat card that happens to rotate. The important distinction is ownership: the scene owns perspective, the stack preserves 3D children, and each layer has a fixed translateZ depth. Pointer input only nudges camera variables inside a small, clamped range, so the object feels responsive without changing layout.

When to use it

Use it for compact hero objects, feature cards, editor thumbnails, and product surfaces where depth helps the user inspect hierarchy. It works best when the animated thing is one self-contained object with a clear front, middle, and back plane. Skip it for dense reading content, primary form controls, or required workflows where pointer tracking would make the target feel like it is moving away from the user.

How it works

The wrapper owns perspective, the stack owns transform-style: preserve-3d, and each child uses translateZ for depth. JavaScript maps pointer coordinates to CSS variables such as --rx and --ry, then CSS applies those variables to the single stack transform.

Production gotchas

Do not rotate the whole page, animate layout dimensions, or let pointer values become unbounded. Large angles make text hard to read and can make perceived hit targets drift away from their actual boxes. Inspector controls must affect depth, tilt, duration, or easing; decorative controls that do not affect the animation should be removed.

Accessibility

Depth is decorative, so the content must remain readable without motion. Pair pointer tracking with focus-visible parity and provide an idle pose that still communicates layers for touch and keyboard users. Reduced motion should flatten live tracking while keeping the stacked planes visible, rather than removing the visual hierarchy entirely.

References

Implementation depth

This is the pointer-reactive version of preserve-3d layering, not another static cube. The scene owns perspective, the stack owns transform-style: preserve-3d, and each layer has a stable translateZ depth so pointer movement changes camera feel without changing document layout.

Keep pointer input bounded and optional. Map client coordinates into small CSS variable ranges, clamp the tilt, and provide a focus or idle state that reads as depth without requiring mouse movement. Reduced motion should flatten the live tracking while keeping the layers visible.

The showcase examples should stay method-based: a depth stack, a glare plane, and a foreground/background split are different expressions of the same 3D contract. Changing only the label or color would not be enough evidence that the slug deserves a separate preset.

Production code needs a clear event boundary. One pointermove listener on the root should update variables; child layers should not each track input, and the transformed surface should not become the source of layout, scroll, or hit-target changes.

Pointer Preserve-3D Parallax Stack