CSS perspective() Function

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>w3wiki</h1> 
          
        <h4>CSS | perspective() function</h4> 
          
        <div> 
            <img class="left" src= 
"https://media.w3wiki.net/wp-content/uploads/20190808102629/Beginner15.png"
                alt="Sample image"> 
  
            <img class="right" src= 
"https://media.w3wiki.net/wp-content/uploads/20190808102629/Beginner15.png"
                alt="Sample image"> 
        </div> 
    </center> 
<body> 
  
</html> 

Output:

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

Google Chrome 12 and above
Internet Explorer 10 and above
Microsoft Edge 12 and above
Mozilla Firefox 10 and above
Safari 4 and above
Opera 15 and above

Tags:

#CSS-Functions #CSS #Web Technologies

CSS opacity() Function

CSS polygon() Function

CSS perspective() Function

HTML

Contact Us