perspective() CSS Function
Description
The perspective()
CSS function determines the distance from the screen plane to the point of convergence of the lines, thereby determines how pronounced the effect of perspective. The default convergence point is located in the center of the element and can be changed using the perspective-origin property.
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
Desktop | |||||
? | ? | ? | ? | ? | ? |
Tablets / Mobile | |||||
![]() |
|||||
? | ? | ? | ? | ? | ? |
Last updated by CSSPortal on: 1st December 2019