Skip to content
Related Articles

Related Articles

Improve Article

How to transform child elements preserve the 3D transformations ?

  • Last Updated : 30 Apr, 2021
Geek Week

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :