CSS transform-style Property

The transform-style defines how child elements are rendered in 3D space.

Child elements can be positioned in 3D space or they can be flattened.

This setting only applies to elements that take part in 3D transformations.

Example

#

Two nested and 3D rotated <div> elements.
The elements are styled to preserve their 3D relationship.

Parent 60deg rotate
Child
-20deg
rotate
<style>
  .transform-parent {
    height: 200px;
    padding: 10px;
    background-color: lightblue;
    transform: rotateY(60deg);
    transform-style: preserve-3d;
  }

  .transform-child {
    width: 300px;
    padding: 50px;
    text-align: right;
    background-color: mediumslateblue;
    color: white;
    transform: rotateY(-20deg);
  }
</style>

<div class="transform-parent">
  Parent 60deg rotate
  <div class="transform-child">
    Child<br />-20deg<br />rotate
  </div>
</div> 

Syntax

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

Values

#

Value Description
flat Default. Child elements do not preserve their 3D position and are displayed flattened.
preserve-3d Child elements preserve their 3D positioning.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when transform-style support started for each browser.

Chrome
36.0 Jul 2014
Firefox
16.0 Oct 2012
IE/Edge
11.0 Oct 2013
Opera
23.0 Jul 2013
Safari
9.0 Sep 2015

You may also like

Guides