Perspective on the 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
/* good */ .row{perspective:700px} .card{transform:rotateY(35deg)}
/* bad */ .card{transform:perspective(300px) rotateY(35deg)}Bad
Good
Why it matters
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.