transform-style
Determines if child elements should be rendered 'flat' against their parent or if they should exist in their own 3D space. This is essential for creating complex 3D scenes (like a rotating cube) where children need to overlap in a 3D environment.
It is documented as part of the CSS Transforms specification.
Syntax
/* Usage Example */
.cube-container {
/* Allows nested elements to stick out or hide behind each other in true 3D space */
transform-style: preserve-3d;
perspective: 1000px;
}
/* Syntax */
transform-style: flat;
transform-style: preserve-3d;
/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;transform-style Browser support
Widely available
Since
2022 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
36+
16+
9+
12+