Skip to content
Related Articles

Related Articles

Improve Article
CSS | perspective Property
  • Difficulty Level : Expert
  • Last Updated : 09 Aug, 2019

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:




    <!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>

    Output:

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

    Example:




    <!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>

    Output:

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

    Example:




    <!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>

    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:




    <!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>

    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
Recommended Articles
Page :