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>