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
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????

Last updated by CSSPortal on: 1st December 2019