Creating Depth with the perspective Property in CSS

To make a 3D-transformed object look like it’s sitting in a three-dimensional space, we need the perspective property. The perspective property adjusts the distance between the drawing plane and the viewer. We’re still projecting three-dimensional coordinates into a two­dimensional space. But adding perspective to a containing element causes its children to have the appearance of being in a 3D space.

As with transform , perspective creates both a new containing block and a new stacking context when the value is something other than none . Along with the perspective-origin property, perspective is used to calculate the perspective matrix. We’ll cover perspective- origin in the next section.

In addition to the none keyword, perspective also accepts a length as its value. Values must be positive (such as 200px or 10em ). Percentages don’t work. Neither do negative values such as -20px .

Smaller values for perspective increase the visual size of the element, as seen below, which has a perspective value of 500px . Items that are closer to the viewer on the Z-axis appear larger than those further away.

Larger values, on the other hand, make elements appear smaller. The container element pictured below has a perspective value of 2000px . This is similar to how your eye perceives objects of varying distances.

Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.

Leave a Reply

Your email address will not be published. Required fields are marked *