Open In App

How to transform child elements preserve the 3D transformations ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will learn how to transform child elements to preserve the 3D transformation. 

The CSS transform-style property is used to transform child elements to preserve the 3D transformations. The transform-style property is used to specify that the children of an element are positioned in 3D space or flattened with respect to the plane of the element. The preserve-3d property value on an element, one can preserve the 3D transformations of its child element.

Syntax: 

transform-style: preserve-3d

Property values:

  • preserve-3d: This value enables the child elements to preserve their 3D position.

Example 1:  Here is the basic example of our above method.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        h2 {
            color: green;
        }
 
        .parent {
            margin: 20px;
            border: 1px double;
            height: 200px;
            width: 200px;
            background-color: green;
            transform: rotateX(15deg);
            /* Now its child's 3d-position is preserved which means
              childrens of the this element should be positioned
              in the 3D-space not in a plane */
            transform-style: preserve-3d;
        }
 
        .child {
            margin: 20px;
            border: 1px dashed;
            height: 250px;
            width: 250px;
            background-color: lightgreen;
            transform: rotateX(45deg);
        }
    </style>
</head>
 
<body>
    <center>
        <h2>GeeksforGeeks</h2>
        <b>CSS transform-style Property</b>
 
        <div class="parent">
            <div class="child"></div>
        </div>
    </center>
</body>
</html>


Output:

transform-style:preserve 3d

Example 2: In this example, we are using the CSS transform style property.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        h2 {
            color: green;
        }
 
        .parent {
            margin: 20px;
            border: 1px double;
            height: 200px;
            width: 200px;
            background-color: green;
            transform: rotateX(15deg);
            /* Now its child's 3d-position is preserved which means
            childrens of the this element should be positioned
            in the 3D-space not in a plane */
            transform-style: preserve-3d;
        }
 
        .child {
            margin: 20px;
            border: 1px dashed;
            height: 250px;
            width: 250px;
            background-color: lightgreen;
            transform: rotateX(45deg);
        }
 
        .gfg1 {
            margin: 20px;
            border: 1px double;
            height: 200px;
            width: 200px;
            background-color: green;
            transform: rotateX(15deg);
            /* flat is default value whose children element
             are lying in the plane of the element itself */
            transform-style: flat;
        }
 
        .gfg2 {
            margin: 20px;
            border: 1px dashed;
            height: 250px;
            width: 250px;
            background-color: lightgreen;
            transform: rotateX(45deg);
        }
    </style>
</head>
 
<body>
    <center>
        <h2>GeeksforGeeks</h2>
        <br />
        <table>
            <tr>
                <td width="350px">
                    <div>
                        <b>Flat(default) Property Value</b>
 
                        <div class="parent">
                            <div class="child"></div>
                        </div>
                    </div>
                </td>
                <td width="350px">
                    <div>
                        <b>preserve-3d Property Value</b>
 
                        <div class="gfg1">
                            <div class="gfg2"></div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </center>
</body>
</html>


Output:

flat and preserve 3d properties



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads