Aquileo | CSS perspective Property

The CSS perspective property adds a 3D effect to child elements by defining the viewer's distance from them.

Applies only to child elements.
Controls how close or far elements appear on the Z-axis.
Smaller values create a stronger 3D effect; larger values create a weaker effect.
The vanishing point can be adjusted usingperspective-origin .
Creates a newstacking context when set to a value other than none.

Syntax:

perspective: length| none| initial| inherit;

Examples of CSS perspective property

Here are some example discussed:

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

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS perspective Property </title>
<!--Driver Code Ends-->

    <style>
    .class1 {
        margin-top: 20px;
        margin-left: 40px;
        height: 200px;
        width: 200px;
        color: #0F9D58;
        border: 1px solid;
        perspective: 200px; 
    }
    
    .class2 {
        padding: 60px;
        border: 2px solid;
        background: #0F9D58;
        color: white;
        transform: rotateX(45deg) rotateY(45deg);
    }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="class1">GeeksforGeeks
        <div class="class2">GeeksforGeeks</div>
    </div>
</body>
  
</html>
<!--Driver Code Ends-->

Example 2: The perspective: none property applies no 3D perspective effect, making it equivalent to 0px.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS perspective Property </title>
<!--Driver Code Ends-->

    <style>
    .class1 {
        margin-top: 20px;
        margin-left: 40px;
        height: 200px;
        width: 200px;
        color: #0F9D58;
        border: 1px solid;
        perspective: none;
    }
    
    .class2 {
        padding: 60px;
        border: 2px solid;
        background: #0F9D58;
        color: white;
        transform: rotateX(45deg) rotateY(45deg);
    }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="class1">GeeksforGeeks
        <div class="class2">GeeksforGeeks</div>
    </div>
</body>
  
</html>
<!--Driver Code Ends-->

Example 3: Set an element’s CSS property to its default value i.e., initial sets the default value. There is no perspective is set.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | perspective Property </title>
<!--Driver Code Ends-->

    <style>
    .class1 {
        margin-top: 20px;
        margin-left: 40px;
        height: 200px;
        width: 200px;
        color: #0F9D58;
        border: 1px solid;
        perspective: initial;
    }
    
    .class2 {
        padding: 60px;
        border: 2px solid;
        background: #0F9D58;
        color: white;
        transform: rotateX(45deg) rotateY(45deg);
    }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="class1">
          GeeksforGeeks
        <div class="class2">GeeksforGeeks</div>
    </div>
</body>
  
</html>
<!--Driver Code Ends-->

Example 4: Makes an element inherit the property's value from its parent. If used on the root element, the property's initial value is applied

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS perspective Property </title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>

<body>
    <div class="class0">
        <div class="class1">GeeksforGeeks
            <div class="class2">GeeksforGeeks</div>
        </div>
    </div>
</body>
  
</html>
<!--Driver Code Ends-->

CSS perspective Property

Examples of CSS perspective property

Explore