CSS perspective() Function

The CSS perspective() function defines the distance between the z=0 plane and the user in order to give the 3D-positioned element some perspective.

The perspective() function works like this:

The l argument specifies the distance from the user to the z=0 plane. The argument is specified as a length value (e.g. 10px, 10vw, etc). The greater the length, the less pronounced the "3D effect" will be. This is because a greater value indicates that the element is further away from the viewer.

Example with translateZ()

Here's an example of using perspective() to apply some perspective when using the translateZ() function to move an element along the z-axis:

The second image appears larger because it has been moved closer to the user.

You can think of the z-axis as coming out of the screen towards the viewer. So any movement along that axis will move the element either closer to, or further away from the user. Therefore, if it's closer, it will appear larger. And if it's further away, it will appear smaller.

Example with rotateY()

Here's an example of using perspective() to apply some perspective when using the rotateY() function to rotate an element along the y-axis.

With no Perspective

Here's what the previous example looks like if we remove the perspective settings:

About the z-axis

3D transform functions allow you to apply transformations along three axes: the x, y, and z axes, as demonstrated by this image of a three dimensional Cartesian coordinate system.

When you use the perspective() function (and the perspective property), you're specifying a point along the z-axis for which the viewer is located. A value of 20px moves the viewer 20 pixels away from the z=0 point. A value of 500px moves the viewer 500 pixels away.

Once the viewer is located some distance from the z=0 point, the conditions are such that they will be able to see the effect of 3D transformations that position any point of the element along different points of the z-axis.

perspective() Function vs perspective Property

CSS also has a perspective property that works in a similar way to the perspective() function. However, there's an important difference between these two features.

First of all, the perspective() function is not a property — it's a function that can be used as a value for a CSS property (the transform property). Also, you apply the perspective() function directly to the applicable element.

The perspective property, on the other hand, applies the perspective setting to a parent element, so that the effect can be seen on the element's children. This can be useful for ensuring multiple elements share the same vanishing point.

Official Syntax

The official syntax of the perspective() function is as follows:

Possible Values

The perspective() function accepts a length value (e.g. 10px, 10vw, etc) as an argument that represents the distance of the z=0 plane from the viewer.

CSS Specifications

• The perspective() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.