Skip to content
Related Articles

Related Articles

CSS | perspective() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Aug, 2022
View Discussion
Improve Article
Save Article

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


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:



<!DOCTYPE html>
        CSS | perspective() function
        h1 {
            color: green;
        .left {
            transform: perspective(400px) rotateY(70deg);
        <h4>CSS | perspective() function</h4>
            <img class="left" src=
                alt="Sample image">
            <img class="right" src=
                alt="Sample image">


CSS perspective() function

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!