As per Vocabulary.com, perspective is the appearance of things relative to one another as determined by their distance from the viewer.
Using this perspective property, we can add some perspective to an element that are positioned in 3D. It determines the distance between the z=0 plane and the user or in other words, it determines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
When we define the perspective property for an element, the CHILD elements gets the perspective view.
Example
Few things to remember
- If the value is 0 or a negative number, no perspective transform is applied.
- Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller.
- The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective CSS property — are not drawn.
- The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.
It’s supported by most modern browsers.
3d examples perspective property style
