CSS | perspective Property

Perspective is the representation of 3D objects on a 2D plane to give the appearance depth and distance in relation to each other. CSS perspective property is used to give perspective to 3D objects. When defining the perspective property, child element gets perspective, not the parent element. So, the value defines how close the child is from the Z plane.

Syntax:

perspective: length | none | initial | inherit;

Property values:



  • length: length sets the distance of child element from viewer to Z plane. So, smaller the value, more splendid image is formed.

    Syntax:

    perspective: length;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | perspective Property
        </title>
        <style>
            .class1 {
                margin-top: 20px;
                margin-left: 40px;
                height: 200px;
                width: 200px;
                color: #0F9D58;
                border: 1px solid;
                
                <!--length value of perspective property--> 
                perspective: 200px;
            }
              
            .class2 {
                padding: 60px;
                border: 2px solid;
                background: #0F9D58;
                color: white;
                transform: rotateX(45deg) rotateY(45deg);
            }
        </style>
    </head>
      
    <body>
        <div class="class1">GeeksforGeeks
            <div class="class2">GeeksforGeeks</div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • none: none is the default value. It indicates no perspective is set. none is equivalent to 0px.
    Syntax:

    perspective:  none;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | perspective Property
        </title>
        <style>
            .class1 {
                margin-top: 20px;
                margin-left: 40px;
                height: 200px;
                width: 200px;
                color: #0F9D58;
                border: 1px solid;
                
                <!--none value of perspective property--> 
                perspective: none;
            }
              
            .class2 {
                padding: 60px;
                border: 2px solid;
                background: #0F9D58;
                color: white;
                transform: rotateX(45deg) rotateY(45deg);
            }
        </style>
    </head>
      
    <body>
        <div class="class1">GeeksforGeeks
            <div class="class2">GeeksforGeeks</div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • initial: initial sets the default value i.e. there is no perspective is set.
    Syntax:

    perspective:  initial ;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | perspective Property
        </title>
        <style>
            .class1 {
                margin-top: 20px;
                margin-left: 40px;
                height: 200px;
                width: 200px;
                color: #0F9D58;
                border: 1px solid;
                
                <!--initial value of perspective property--> 
                perspective: initial;
            }
              
            .class2 {
                padding: 60px;
                border: 2px solid;
                background: #0F9D58;
                color: white;
                transform: rotateX(45deg) rotateY(45deg);
            }
        </style>
    </head>
      
    <body>
        <div class="class1">GeeksforGeeks
            <div class="class2">GeeksforGeeks</div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • inherit: inherit receives the property from the parent element. When it is used with root element then initial property will be used.
    Syntax:

    perspective:  inherit;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | perspective Property
        </title>
        <style>
            .class0 {
                perspective: 150px;
            }
              
            .class1 {
                margin-top: 20px;
                margin-left: 40px;
                height: 200px;
                width: 200px;
                color: #0F9D58;
                border: 1px solid;
                
                <!--inherit value of perspective property--> 
                perspective: inherit;
            }
              
            .class2 {
                padding: 60px;
                border: 2px solid;
                background: #0F9D58;
                color: white;
                transform: rotateX(45deg) rotateY(45deg);
            }
        </style>
    </head>
      
    <body>
        <div class="class0">
            <div class="class1">GeeksforGeeks
                <div class="class2">GeeksforGeeks</div>
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

Supported Browsers: The browsers supported by perspective Property are listed below:

  • Google Chrome 36.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Operea 23.0
  • Safari 9.0


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.