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.
Quick example
.cube-container {
/* Allows nested elements to stick out or hide behind each other in true 3D space */
transform-style: preserve-3d;
perspective: 1000px;
}Quick facts
Initial value
flatInherited
No
Applies to
transformable elements
Animation type
discrete
Values
flatpreserve-3d 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.
Safe to use without fallbacks.
36+
16+
9+
12+