The transform-style property is used to specify how nested the elements will be in a 3D space.

Syntax:

selector { 

    transform-style: flat | preserve-3d | initial | inherit;

}

Values:

  • flat; Default value. Child elements do not preserve the 3D characteristics.
  • preserve-3d; Transfers 3D characteristics of the parent element to its children elements.
  • initial, inherit

For 3D transforms the transform-style property can be flat (the default) or preserve-3d. If set as ‘flat’ the children elements of a transformed element will stay in 2D (same plane), while if set to the ‘preserve-3d’ the children elements will keep the 3D form with the distance in front of or behind the parent element controlled by the Z axis.

NOTE: The transform-style property must be used together with transform property in order to be functional.

Example

The transform-style property example:

​x
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    position: relative;
    height: 200px; width: 80%; margin: 10px; padding: 10px;
    border: 2px dashed gray; background-color:lightblue;
}
div div {
    height:160px; width:60%;
    background-color:yellow;
    transform: rotateZ(10deg);
    transform-style: preserve-3d;
    /* ADD proprietary selectors if needed */
}
​
div div div {
    height:140px; width:100%;
    transform: rotateZ(10deg);
    transform-style: flat;
    /* ADD proprietary selectors if needed */
}
</style>
</head>
  
<body>
​
<h3>Tranform-style property example of nested boxes</h3>
<div>MAIN box - no transform
    <div>box2 - preserve3D
        <div>box3 - flat
            <div>box4 - no transform</div>
        </div>
    </div>
</div>
​
</body>
</html>

 

›› go to examples ››