The perspective() CSS function defines a 3D perspective view for elements, simulating depth by affecting how 3D transformed elements appear in space. When you apply perspective() to a parent element, it determines the vanishing point for its child elements that are transformed with transform functions such as rotateY(), rotateX(), or translateZ(). The smaller the perspective value, the more pronounced the 3D effect, making elements appear as if they are closer to the viewer. Conversely, a larger value creates a subtler 3D effect, making the element appear farther away.

The perspective() function only affects elements in 3D space and has no visual effect on elements without 3D transformations. Unlike the transform property, which directly modifies the element’s shape or position, perspective() controls the viewing angle and depth perception. It is often used together with transform-style set to preserve-3d to ensure child elements retain their 3D transformations in the context of the parent.

For example, consider a div with a cube inside it:

.parent {
  perspective: 800px;
}

.child {
  transform: rotateY(45deg) translateZ(50px);
  transform-style: preserve-3d;
}

Here, the perspective value of 800px makes the 3D rotation and translation of the child element visible, giving the illusion that it is angled and positioned in 3D space. Without perspective(), the rotation would appear flat and lose the depth effect.

The function can be combined with animations for dynamic 3D effects, such as spinning cards or interactive 3D galleries. It is commonly applied to the parent container rather than individual elements to maintain consistent depth perception across multiple children.

If desired, you can also use the shorthand property perspective-origin to adjust the origin point from which the perspective is calculated, altering the apparent viewpoint.