See exactly what the perspective and perspective-origin properties do, isolated from other 3D transforms, on a live three-card scene. Adjust distance and vanishing point, then copy the CSS.
This playground deliberately leaves rotation and translateZ fixed on the demo cards, so the only thing changing when you move a slider is perspective itself.
Move from 200px to 2000px and watch depth go from dramatic to nearly flat.
Drag perspective-origin X and Y to shift where the 3D scene converges.
Get a ready-to-use .stage rule with both properties set correctly.
Three sliders and a toggle are all you need to understand this property.
The perspective property is what turns flat, rotated elements into something that actually looks three-dimensional. Without it, transforms like rotateY or translateZ still technically apply, but there is no vanishing point for the browser to render toward, so the result looks like a flat, skewed shape rather than real depth. Setting perspective on a parent element defines how far away the viewer is from the z=0 plane: a small value places the viewer very close, exaggerating depth dramatically, while a large value places the viewer far away, flattening the scene almost back to 2D. The perspective-origin property works alongside it, moving the vanishing point itself, which is what makes elements appear to recede toward a corner instead of dead center.
Setting perspective on a parent applies to every 3D child consistently. Using the perspective() function inside an individual transform only affects that one element.
Child elements need transform-style:preserve-3d on their parent to keep their own 3D positioning instead of being flattened into the page.
Values around 600px to 1200px feel natural for UI cards and modals; very small values under 300px create an exaggerated, almost fisheye look.
Card flips, tilt-on-hover effects, rotating cubes and parallax-style scenes all rely on perspective being set correctly on their container.
It sets the distance between the viewer and the z=0 plane of a 3D scene, controlling how dramatic the apparent depth of child elements looks.
perspective sets how close the viewer is to the scene, while perspective-origin sets the X and Y position of the vanishing point that the 3D scene converges toward.
Combining rotation and translateZ on the same element at once makes it hard to tell what perspective alone is doing. Isolating it here makes the effect of the property clear.
A smaller value places the viewer closer to the scene, which creates a more dramatic, exaggerated depth effect. Larger values flatten the 3D effect.
Yes. It is completely free, requires no account, and every calculation happens locally in your browser.
Keep exploring depth, motion and shape with these free online CSS tools.