The transform-style property determines whether the children of an element are positioned in three-dimensional space or flattened in the two-dimensional plane of the element.
It is mostly used when transforms are nested. That is, it can be used to preserve the three-dimensional space of an element that is transformed in its parent’s three-dimensional space. See the live demo section below for an example.
It takes one of two values: flat and preserve-3d. The value preserve-3d will allow the element’s children to be positioned in a three-dimensional space. The value flat, as the name suggests, will flatten the elements into their parent’s plane, not allowing them to be positioned along the z-axis.
A value other than preserve-3d establishes a stacking context.
Trivia & Notes
The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore override the behavior of transform-style: preserve-3d:
overflowwith any value other thanvisible.filterwith any value other thannone.clipwith any value other thanauto.clip-pathwith any value other thannone.isolationwith a used value ofisolate.mask-imagewith any value other thannone.mask-box-sourcewith any value other thannone.mix-blend-modewith any value other thannormal
So, if you want to position elements in three-dimensional space and have the transform-style property correctly set, make sure the container of the elements you want to transform does not have any of the above properties set with the mentioned values.
The transform-style property is not inherited. Hence, you should use it on any descendants whose children you want to be transformed in three-dimensional space.
Official Syntax
-
Syntax:
transform-style: flat | preserve-3d
- Initial: flat
- Applies To: transformable elements
- Animatable: no
Values
- flat
- Flattens the children of the element so that they lie in the plane of the element itself.
- preserve-3d
- Allows the children of the element should be positioned in the three-dimensional space.
Examples
In the following example, the .element is transformed inside its .container. It has transform-style: preserve-3d set because its child (the img) is also positioned in three-dimensional space. You can see the live demo of this example in the live demo section below.
.container {
/* activate 3D space */
perspective: 800px;
}
.element {
width: 100%;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
/* transform */
transform: rotateY(50deg);
/* allow direct descendants to be transformed */
transform-style: preserve-3d;
}
.element img {
transform: rotateX(-30deg);
}
Live Demo
In the following demo, the image is set to animate its position in the three-dimensional space for a better view of how it moves in that space. Change the value of the preserve-3d property on the .element to flat to see how the image is forced to stay in the two-dimensional plane of its parent, preventing it from swinging in the three-dimensional space.
Please refer to the transform, transform-origin, and perspective entries for more information on how the demo works.
Browser Support
The following table shows the browser support for the transform-style property, including notes on partial support.
CSS3 3D Transforms
Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.
W3C Working Draft
Supported from the following versions:
Desktop
- 36
- 16
- 10
- 23
- 15
Mobile / Tablet
- 15
- 130
- No
- 130
- 130
