How to transform child elements preserve the 3D transformations ?

30 Apr, 2021
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:  
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: 
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
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array