CSS perspective() Function

Last Updated : 30 Aug, 2024

The perspective() function is an inbuilt function in CSS which is used with transform property to set the perspective effect on images.

Syntax:

perspective( length );

Parameters: This function accepts single parameter length which is used to hold the value of perspective level. The length value represents the distance from user to z=0 plane. It is a mandatory parameter.

Return value: It makes the image perspective on the basis of user define value.

Below example illustrates the perspective() function in CSS:

Example:

HTML

<!DOCTYPE html> <html> <head> <title> CSS | perspective() function </title> <style>  h1 {  color: green;  }  .left {  transform: perspective(400px) rotateY(70deg);  }  </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h4>CSS | perspective() function</h4> <div> <img class="left" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png" alt="Sample image"> <img class="right" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png" alt="Sample image"> </div> </center> <body> </html>