# Perspective on the Parent

**SHOULD** · **ID:** `design-perspective-on-parent` · **Category:** design
**Source:** [Web Platform](https://web.dev/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-perspective-on-parent

> SHOULD: Set the perspective property once on the shared container so all its 3D children share one vanishing point. Do NOT bake the perspective() function into each child's transform — that gives every element its own viewpoint and the scene stops being coherent.

Set perspective once on the shared container, not baked into each child's transform

There are two ways to add depth and they are not equivalent. The perspective property on a container establishes one viewpoint for everything inside it, so a row of rotated cards converges toward a single point and reads as one shelf in one space. Writing the perspective() function into each child's own transform instead re-centres the viewpoint on that child, so every element is seen head-on from its own middle and the group looks flat and unrelated no matter how far you rotate it. The rule of thumb: perspective (the property) belongs on the nearest common ancestor of the 3D elements that should share a scene; reach for the perspective() function only when you deliberately want one element to have an independent viewpoint. Tune the value to taste — smaller is a more dramatic, wide-angle depth.

## Rule snippet

```tsx
/* good */ .row{perspective:700px} .card{transform:rotateY(35deg)}
/* bad */ .card{transform:perspective(300px) rotateY(35deg)}
```

## Bad — do not do this

`design-perspective-on-parent-bad`

```tsx
export function PerspectiveOnParentBad() {
  return (
    <div className="flex w-full max-w-sm flex-col items-center py-8">
      <div className="flex items-center justify-center gap-3">
        {[35, 0, -35].map((deg, i) => (
          <div
            key={i}
            className="flex h-28 w-20 flex-col items-center justify-center gap-1 rounded-lg border border-border bg-gradient-to-br from-card to-muted text-foreground shadow-xl"
            // Each card carries its own perspective() — its own vanishing point.
            style={{ transform: `perspective(300px) rotateY(${deg}deg)` }}
          >
            <span className="text-lg font-semibold">{i + 1}</span>
            <span className="text-[10px] uppercase tracking-wide text-muted-foreground">card</span>
          </div>
        ))}
      </div>
      <p className="mt-8 text-center text-xs text-destructive">
        perspective() baked into every card gives each one its own vanishing point — the outer cards warp
        harder than the center, the depth is inconsistent, and the row never sits in one space.
      </p>
    </div>
  );
}
```

## Good — do this

`design-perspective-on-parent-good`

```tsx
export function PerspectiveOnParentGood() {
  return (
    <div className="flex w-full max-w-sm flex-col items-center py-8">
      {/* One perspective on the shared container — one vanishing point. */}
      <div className="flex items-center justify-center gap-3" style={{ perspective: '700px' }}>
        {[35, 0, -35].map((deg, i) => (
          <div
            key={i}
            className="flex h-28 w-20 flex-col items-center justify-center gap-1 rounded-lg border border-border bg-gradient-to-br from-card to-muted text-foreground shadow-xl"
            style={{ transform: `rotateY(${deg}deg)` }}
          >
            <span className="text-lg font-semibold">{i + 1}</span>
            <span className="text-[10px] uppercase tracking-wide text-muted-foreground">card</span>
          </div>
        ))}
      </div>
      <p className="mt-8 text-center text-xs text-success">
        One perspective on the parent: all three cards share a vanishing point and read as a single shelf
        receding into space.
      </p>
    </div>
  );
}
```

## References

- [MDN — perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)
- [MDN — Using CSS transforms (3D)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)