In this section, we will learn what the perspective property is and how to use it in CSS.

Click here to run the example of perspective property.

CSS perspective Property Definition and Usage

The CSS perspective property is used to create a 3D view of one or multiple elements in an HTML document.

This property is applied to a container element that we want to see its children in 3D view.

Other than the perspective property, we have a function that is called perspective().

The difference between this function and the perspective property is that:

Using perspective() function, we can individually create a new perspective for elements in an HTML document. Basically, this way it’s like creating a separate camera for each element.

But when using the perspective property, the entire elements of a container element will be seen from only one perspective (camera).

Note: `perspective` function is used as the value of the `transform` property.

CSS perspective Property Syntax

transform: perspective(length);

perspective: length|none;

CSS perspective Property Value

The value we set for the perspective() function and perspective property is a number ranged from 0 (equal to no perspective) to higher values.

Basically, this value sets the distance between a camera and its related element.

Note: any CSS supported units can be used here.

Take a look at the picture below:

As you can see, the higher value we set for `perspective()` function, the distance between the camera and its related element becomes higher and as a result we will have a smaller perspective of the target element. (In this case, it is basically a long distance perspective of the target element).

Also, if we set a lower value for the `perspective()` function, the distance between the camera and its related element will be smaller and as a result, we will have a bigger perspective of the element. (In this case, it is basically a close distance perspective of the target element).

Now, as the picture below shows, if we use `perspective` property, there will be only one perspective for the entire child elements of the target container.

Using `perspective` property, it’s like creating only one camera for the entire elements that we want them to be in a perspective.

Note: No-matter if we’re using `perspective` property or `perspective()` function, adding a perspective is an important part of 3D transforms. Without it, elements further from the view won’t appear smaller, and those closer won’t appear larger.

Example: perspective() function in CSS

See the Pen perspective() function in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS perspective Function Work?

In this example, we used different distance for each element and as we can see in the result, some of the elements look closer and larger and some of them look farther and hence smaller.

Example: No CSS perspective function()

See the Pen No CSS perspective function() by Omid Dehghan (@enjoytutorials1) on CodePen.

Let’s compare the result of the two examples above:

As we can see, using `perspective` function (the result on the left side) really gives us the 3d effect comparing to not using it at all (the result on the right side).

Example: CSS perspective property

See the Pen CSS perspective property by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: difference between perspective() function and perspective property

See the Pen difference between perspective() function and perspective property by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS perspective Property Work?

As you can see, because `perspective()` function creates a separate perspective for each element, all four elements that used `perspective()` function in this example, looks exactly the same.

On the other hand, because `perspective` property only creates one perspective for the entire child elements, each of these elements now has a different view because of their positions and distances from the camera.