CSS transform-style Property

The transform-style property specifies how the children elements are rendered in three dimensional (3D) space.

This property is one of the CSS3 properties.

It only works with the transform property.

The transform-style property has two values: flat and preserve-3d. If "flat" value is set, the element's children will not exist on their own in the 3D-space.

INFO

For maximum browser compatibility extension such as -webkit- for Safari, Google Chrome, and Opera (newer versions) is used with this property.

Initial Value	flat
Applies to	Transformable elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.transformStyle = "flat";

Syntax

CSS transform-style values

css

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

Example of the transform-style property:

CSS transform-style code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element {
        position: relative;
        height: 250px;
        width: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      #element1 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #8ebf42;
        -webkit-transform: rotateY(50deg);
        -webkit-transform-style: preserve-3d;
        transform: rotateY(50deg);
        transform-style: preserve-3d;
      }
      #element2 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #1c87c9;
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div id="element">
      <div id="element1">
        Green
        <div id="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Result

CSS transform-style property

Example of the transform-style property with the "flat" value:

Example of CSS transform-style property with flat value

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        position: relative;
        height: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #cccccc;
        background-color: #eeeeee;
      }
      .element1 {
        margin: 20px;
        border: 1px dotted;
        height: 150px;
        width: 150px;
        background-color: green;
        transform: rotateX(15deg);
        transform-style: flat;
      }
      .element2 {
        margin: 20px;
        border: 1px dotted;
        height: 200px;
        width: 200px;
        background-color: lightgreen;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div class="element">
      <div class="element1">
        Green
        <div class="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Values

Value	Description
flat	Defines that children of the elements will not be positioned three dimensional space. This is the default value of this property.
preserve-3d	Defines that children of the elements will be positioned in three dimensional space.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Practice

Transform-style property only works with the

transition property.animation-name property.transform property.

CSS transform-style Property ​

Syntax ​

Example of the transform-style property: ​

Result ​

Example of the transform-style property with the "flat" value: ​

Values ​