CSS perspective Property

The perspective property establishes a 3D space for an element’s descendants and controls how those descendants are projected onto the 2D rendering surface. Conceptually, it defines the distance between the user and the z=0 plane of that local 3D space, which determines how much foreshortening and depth distortion are applied to elements that are transformed in three dimensions. When you set this property on a container, its children that use 3D transforms are rendered as if seen from a point in front of (or behind) that container, creating the familiar vanishing-point effect. The point around which that perspective projects can be adjusted with perspective-origin.

It’s important to understand how this differs from applying a perspective via the transform functions. A transform that uses a perspective value (the perspective() function) applies that projection to the element being transformed itself, whereas the perspective property on a parent creates a shared 3D context that influences all of its transformed descendants. Because of that, the same visual result can be achieved in different ways depending on whether you want the projection to be local to a single element or shared among a group of children.

For nested 3D content to retain true depth relationships, you often need to allow children to keep their 3D rendering inside their transformed parents. That behavior is controlled by transform-style. When a parent’s transform flattening would otherwise collapse its children into the parent's plane, enabling the appropriate 3D-preserving mode ensures the perspective-established depth is visible throughout the descendant chain. In practice, use perspective on an ancestor when you want a consistent camera-like view of multiple transformed elements, and use transform-based perspective when you need a per-element, localized projection.