W3docs
en
Log in

CSS transform-style Property

How to use the transform-style CSS property to position the children element in 3D-space. See functions and practice with examples.

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 Valueflat
Applies toTransformable elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.transformStyle = "flat";

Syntax

CSS transform-style values

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

Example of the transform-style property:

CSS transform-style code example

<!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>
Try it Yourself »

Result

CSS transform-style property

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

Example of CSS transform-style property with flat value

<!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>
Try it Yourself »

Values

ValueDescription
flatDefines that children of the elements will not be positioned three dimensional space. This is the default value of this property.
preserve-3dDefines that children of the elements will be positioned in three dimensional space.
initialSets this property to its default value.
inheritInherits this property from its parent element.

Practice

Practice

Transform-style property only works with the