transform-style property is used to specify if the children of a given element are positioned in the 3D space or are flattened in the plane of the element. If flattened, the children will not exist on their own in the 3D-space. This property is mostly used when transforms are nested. In such cases, it can be used to preserve the 3D space of an element that is transformed in its parent’s 3D space.
The initial value of CSS
transform-style property is
flat. You can only apply it to transformable elements. This property is not inheritable. The final computed value of the
transform-style property is the exact same value that you initially supplied. This property is not animatable.
You should note that some CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied. In such cases, the used value of
transform-style is forced to be flat. Here is a list of all such property values:
overflow: any value other than
opacity: any value less than
filter: any value other than
clip: any value other than
clip-path: any value other than
isolation: used value of
mask-image: any value other than
mask-border-source: any value other than
mix-blend-mode: any value other than
This is the formal syntax for using transform-style property.
transform-style: flat | preserve-3d
Here are some examples of using this property.
/* Keyword values */ transform-style: preserve-3d; transform-style: flat; /* Global values */ transform-style: inherit; transform-style: initial; transform-style: unset;
This value is used to flatten the children of the element so that they are lying in the plane of the element itself.
This value is used to allow the children of the element to be positioned in the three-dimensional space.
The following table shows the browser support for the transform-style property, including notes on partial support.
- Read more about the CSS
<transform-style>property on MDN.
- You can also read the CSS
<transform-style>property on CSSWG.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.