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