Skip to main content

CSS perspective() Function – How to Add Perspectives to Elements

perspective() transforms an element by adding some perspective effects to it.

Syntax of the CSS perspective() Function​

perspective() accepts only one argument. Here is the syntax:

element {
  transform: perspective(length);
}

The length argument specifies the user's distance to the z=0 plane.

What Is the z=0 Plane?​

The z=0 plane is the point on the Cartesian coordinate system where the coordinate z equals zero (0).

Illustration of z=0 plane

A three dimensional Cartesian coordinate system with an arrow pointing to the z=0 plane

z=0 Plane vs. perspective(): What Is the Difference?​

The z=0 plane is the point on the z-axis where z equals zero (0).

The CSS perspective() function defines the distance between the user and the imagery plane located at the coordinate z=0.

Buy CSS Flexbox book

In other words, suppose you pass a positive length argument to the CSS perspective() function. In that case, the greater the length, the farther the distance between you and the z=0 plane.

For instance, a perspective(70px) method creates a 70px distance between you and the z=0 plane. While a perspective(300px) method creates a 300px distance.

Illustration of the CSS perspective() method

A three dimensional Cartesian coordinate system with a red arrow defining the distance between the user and the z=0 plane
info
  • The perspective() method's argument must be a positive value. Otherwise, the browser will apply no perspective effect on the selected element.
  • List perspective() first whenever you chain it with other CSS transform functions. Otherwise, browsers might transform the selected element incorrectly.

Examples of the CSS perspective() Function​

We often use perspective() with other CSS functions such as translateZ(), rotateX(), and rotateY(). Below are some examples.

How to use perspective() with the CSS translateZ() function​

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) translateZ(10px);
}

Try it on StackBlitz

Here's what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the translateZ() function to reposition the second-image ten pixels (10px) away from its original position along the z-axis.

Note the following:

  • Suppose the second-image's z-axis position is larger than or equal to the perspective() function's argument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element. Or when the element is behind the user.
  • The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.

How to use perspective() with the CSS rotateY() function​

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) rotateY(-10deg);
}

Try it on StackBlitz

Here's what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the rotateY() function to rotate the second-image negative ten-degree (-10⁰) around the y-axis.

How to use perspective() with the CSS rotateX() function​

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) rotateX(17deg);
}

Try it on StackBlitz

Here's what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the rotateX() function to rotate the second-image seventeen-degree (17⁰) around the x-axis.

Overview​

This article discussed what a CSS perspective() function is. We also used examples to see how it works.