perspective() CSS Function

Description

The CSS perspective() function is used to give a 3D-positioned element some perspective. It does this by creating a vanishing point at a specified distance from the user. The vanishing point is the point at which all parallel lines appear to meet.

The perspective() function takes a single argument, which is the distance from the user to the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen.

The closer the vanishing point is to the user, the more pronounced the 3D effect will be. A vanishing point that is far away from the user will create a more subtle 3D effect.

The perspective() function is typically used in conjunction with other CSS transform properties, such as translate(), rotate(), and scale(), to create 3D effects.

Here is an example of how to use the perspective() function:

.element {
  transform: perspective(500px) translateZ(100px);
}

This CSS code will create an element that has a perspective of 500 pixels and is translated 100 pixels on the z-axis. This will give the element a 3D effect, making it appear to be floating in front of the screen.

The perspective() function can be used to create a wide variety of 3D effects, such as rotating cubes, flipping cards, and cascading galleries.

Here are some tips for using the perspective() function:

• Use a higher value for the vanishing point distance to create a more subtle 3D effect.
• Use a lower value for the vanishing point distance to create a more pronounced 3D effect.
• Use the perspective() function in conjunction with other CSS transform properties to create more complex 3D effects.
• Be aware that the perspective() function can affect the performance of your website, so use it sparingly.

Syntax

perspective() = perspective( <size>)

Values

• sizeIs a <length> representing the distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied.

Example

<p>Hover over the image</p>

<img class="perspective" src="images/nature.jpg" alt="Perspective">

.perspective:hover {

   transform: perspective(200px) translateZ(60px);

}

p {

   float:left;

}

Browser Support

The following table will show you the current browser support for the CSS perspective() function.

Desktop
12	12	10	15	4

Tablets / Mobile
18	10	14	3.2	1	3

Last updated by CSSPortal on: 7th October 2023