transform-style

The transform-style property, when applied to an element, determines if that element’s children are positioned in 3D space, or flattened.

.parent {
    transform-style: preserve-3d;
}

It accepts one of two values: flat (the default) and preserve-3d. To demonstrate the difference between the two values, click the toggle button in the CodePen below:

<div class="wrap">
    <div class="parent">
      <div class="one"></div>
      <div class="two"></div>
    </div>
</div>

<button>toggle transform-style</button>

button {
  display: block;
  margin: 20px auto;
  padding: 5px 20px;
}

.wrap {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px auto;
  background: transparent;
  perspective: 600;
}

.parent {
  margin: 10px;
  width: 150px;
  height: 150px;
  background-color: aquamarine;
  transform-style: preserve-3d;
  transform: rotateY(245deg);
}

.parent-flat {
  transform-style: flat; 
}

.parent > div {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
}

.one {
  background-color: goldenrod;
  transform: translateZ(-100px) rotateY(45deg);
}

.two {
  background-color: green;
  transform: translateZ(50px) rotateX(20deg);
  transform-origin: 50% top;
}

When the button is clicked, the demo uses JavaScript to toggle the transform-style value between preserve-3d and flat.

As you can see, when the value is changed to flat, the child elements are no longer stacked according the the translateZ values (in 3D space), but instead flatten out to appear the way elements are by default on an HTML page.

Related Properties

• transform
• perspective

Browser Support

All browsers require vendor prefixes, except Firefox 16+. Opera uses -webkit- as of version 15 and the Blink conversion.

IE10 supports 3D transforms, but does not support the transform-style property.