The CSS property used to create a 3D perspective effect on a transformed element is `perspective`.
The `perspective` property establishes the distance between the viewer and the z=0 plane for an element’s 3D-transformed descendants. It takes `none` or a positive length such as `800px`. Smaller values place the viewer closer and exaggerate depth; larger values create a flatter, more distant-looking result. The vanishing point can be repositioned with the related `perspective-origin` property.
This is easy to confuse with `transform`, `transform-style`, and `backface-visibility`. `transform` performs rotations, translations, and scaling; `transform-style: preserve-3d` keeps nested elements in three-dimensional space; and `backface-visibility` controls whether the reverse side of a transformed object is rendered. They contribute to a 3D scene, but they do not define the viewing distance.
CSS perspective follows principles long used in painting, photography, and computer graphics: objects farther along the z-axis appear smaller or larger according to their position relative to the viewer. In CSS, applying a non-`none` perspective value also creates a new stacking context. A perspective value on a parent affects its children, while the `perspective()` function inside `transform` is a separate transform function with related behavior.