Transform Style Property
Last updated: 2026-09-13
transform-style Transform Style Property
The transform-style property decides whether an element's children keep their 3D positions in space. The default value flat flattens the children into the parent's 2D plane; with preserve-3d the children can be positioned in independent 3D space, and combined with perspective it builds genuinely three-dimensional scenes.
| Category | |
|---|---|
| Initial Value | flat |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
transform-style: flat | preserve-3d;⚙️ Values
| Value | Type | Description |
|---|---|---|
flat | preserve-3d | Keyword | Whether children keep their 3D positions |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform-style | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Supported in all major browsers | |||||
Important： preserve-3d is not inherited: you must set it explicitly on the parent that should keep the 3D space, and that parent usually also needs a perspective for the depth to be visible.
Warning： Properties such as overflow: hidden, opacity, and filter force a new flattening context and can break the 3D effect of preserve-3d.
❓ FAQ
QWhen do I need to use the transform-style: preserve-3d value?
AWhen children need real depth inside the parent's 3D space — such as a 3D cube, a card flip, or stacked layers. For ordinary planar transforms like rotating, scaling, or translating on one plane, the default flat is enough: flat presses every child into the parent's plane, so only a 2D effect is visible.
QWhy is there still no 3D effect even though I set preserve-3d?
AThe most common cause is a missing perspective: without perspective there is no foreshortening, and rotation shows no depth. The second cause is an overflow: hidden, an opacity below 1, or a filter on the parent or an ancestor — each forces the 3D space to be flattened back to a plane. Checking these two points usually fixes it.
QWhat is the difference between transform-style: preserve-3d and perspective?
Aperspective defines the distance from the viewer to the z=0 plane, which sets the strength of the perspective. It can be declared on the parent to affect all 3D children uniformly, or used as the transform: perspective() function on a single element. transform-style: preserve-3d decides whether children keep their 3D positions. Both are needed together to create real 3D scenes.
QHow well is transform-style: preserve-3d supported in browsers?
AAll modern browsers support preserve-3d, but Safari has a history of inconsistent 3D transform support, and some combinations may be silently downgraded to flat. If 3D fails on Safari, apply the 3D transform directly on the children with the perspective() function instead, avoiding the dependency on a parent 3D context.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
