Skip to content
Related Articles

Related Articles

CSS | perspective() Function
  • Last Updated : 04 Feb, 2021

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
                alt="Sample image">
 
            <img class="right" src=
                alt="Sample image">
        </div>
    </center>
<body>
 
</html>

chevron_right


Output: 
 

CSS perspective() function

Supported browser: The browser supported by CSS | perspective() function are listed below: 

  • Google Chrome
  • Internet Explorer/ Microsoft Edge
  • Mozilla Firefox
  • Safari
  • Opera

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :