How to transform child elements preserve the 3D transformations ?

Last Updated : 11 May, 2023

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>