CSS transform-style Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS transform-style property comparing flat and preserve-3d for nested 3D transforms
Definition

Definition and Usage

The transform-style property sets whether children of an element stay in 3D space or are flattened into the parent’s plane.

The default is flat. Use preserve-3d on a parent when nested transforms (for example a child with translateZ) should share real 3D depth with that parent’s rotation. Pair it with perspective so depth is visible. It is not inherited.

Baseline · Widely available.

Not deprecated. Cross-browser since about September 2015. Not supported in Internet Explorer.

3D tip.

Set preserve-3d on every non-leaf parent in the 3D tree. One missing level flattens the children below it.

Syntax

CSS Syntax

syntax.css
transform-style: flat | preserve-3d | initial | inherit;

Two keywords. flat is the default. preserve-3d keeps children in 3D space.

Values

Property Values

ValueDescriptionTry it
flatChildren lie in the parent’s plane (default)Try it
preserve-3dChildren keep their own 3D positionsTry it
With perspectiveShows depth when an ancestor has perspectiveTry it
Nested 3DParent rotateY plus child translateZTry it
initialResets to flatTry it
inheritTakes the parent’s transform-style valueTry it
Approach

How to Use transform-style

Build a small 3D tree: perspective → scene → children.

  1. Put perspective on an outer container.
  2. Set transform-style: preserve-3d on the scene (parent of 3D children).
  3. Transform the scene (for example rotateY) and children (for example translateZ).
  4. Avoid properties that force flattening (overflow hidden, opacity < 1, and similar).
Try it

Live Preview

The amber panel uses translateZ(48px). Toggle transform-style on the blue parent and compare depth.

Blue = parent scene. Amber = child with translateZ. Perspective stays on the stage.

3D scene
Parent
Z+

transform-style: preserve-3d

Code

CSS Examples

Each snippet needs perspective plus a child translateZ so transform-style is visible. Use Try It Yourself for a live editor.

Example 1 — Flat (Default)

Children are flattened into the parent’s plane, so translateZ does not pop out.

CSS
<style>
  .stage { perspective: 500px; }
  .scene {
    transform: rotateY(-32deg);
    transform-style: flat;
  }
  .child { transform: translateZ(48px); }
</style>

<div class="stage">
  <div class="scene">
    <div class="parent">Parent</div>
    <div class="child">Z+</div>
  </div>
</div>
Try It Yourself

How It Works

  1. Perspective on the stage. Creates a vanishing point for 3D drawing.
  2. Scene is flat. transform-style: flat flattens descendants first.
  3. Child Z is painted. translateZ still runs, but as a flat paint effect.
  4. Less depth. The amber child does not stand away in true 3D space.

Example 2 — Preserve-3d

Children keep their 3D positions, so translateZ moves toward the viewer.

CSS
<style>
  .stage { perspective: 500px; }
  .scene {
    transform: rotateY(-32deg);
    transform-style: preserve-3d;
  }
  .child { transform: translateZ(48px); }
</style>

<div class="stage">
  <div class="scene">
    <div class="parent">Parent</div>
    <div class="child">Z+</div>
  </div>
</div>
Try It Yourself

How It Works

  1. Same scene setup. Perspective and rotateY stay the same.
  2. Switch to preserve-3d. Children share the parent’s 3D space.
  3. Z pops forward. The amber child moves out along the Z axis.
  4. Use for cubes/cards. Faces and layers need this on their parent.

Example 3 — Nested Scene

A compact scene: rotate the parent, push the child in Z, keep preserve-3d.

CSS
<style>
  .stage { perspective: 600px; }
  .scene {
    transform: rotateY(-40deg) rotateX(10deg);
    transform-style: preserve-3d;
  }
  .front { transform: translateZ(40px); }
</style>

<div class="stage">
  <div class="scene">
    <div class="back">Back</div>
    <div class="front">Front</div>
  </div>
</div>
Try It Yourself

How It Works

  1. Outer perspective. Gives the scene depth cues.
  2. Parent rotates in 3D. rotateY / rotateX tilt the whole group.
  3. preserve-3d on the scene. Front and back stay in one 3D space.
  4. Front moves on Z. Without preserve-3d, that Z offset would flatten.

Edge Cases & Pitfalls

If preserve-3d seems ignored, a grouping property or missing parent value is usually why.

force-flat

Some properties force flat

overflow other than visible/clip, opacity < 1, filter, clip-path, and similar can force a used value of flat even if you set preserve-3d.

inherit

Not inherited

Each nesting level needs its own preserve-3d if grandchildren should stay in 3D.

perspective

No perspective, weak depth

Without perspective (or perspective()), 3D transforms can look flat even with preserve-3d.

stacking

Creates a stacking context

transform-style creates a stacking context. Z-order and overlays may behave differently than a plain 2D box.

backface

Pair with backface-visibility

For card flips, use backface-visibility: hidden on faces so the reverse side does not show through.

Compatibility

Browser Support

transform-style is a browser CSS property for 3D transform trees. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

transform-style

Chrome 12+, Firefox 10+, Safari 4+, Edge 12+. Widely available since September 2015. Not in Internet Explorer.

97% Browser support
Google Chrome 12+
Full support
Mozilla Firefox 10+
Full support
Apple Safari 4+
Full support
Microsoft Edge 12+
Full support
Opera 15+
Full support
Samsung Internet 4+
Full support
Internet Explorer Not supported
Not supported
transform-style Widely supported

Bottom line: Safe for modern 3D UI. For Internet Explorer, fall back to flat 2D motion. It is not a runtime API.

Remember

Key Takeaways

  • Role: keep children in 3D (preserve-3d) or flatten them (flat).
  • Default: flat — nested Z transforms do not form a true 3D scene.
  • Needs perspective: depth looks better with an ancestor perspective.
  • Watch grouping props: overflow, opacity, filter, and friends can force flat.

One line: use transform-style: preserve-3d on parents so nested 3D transforms share real depth.

Frequently Asked Questions

It controls whether child elements stay in 3D space (preserve-3d) or are flattened into the parent’s plane (flat).
The default is flat. Nested 3D transforms are flattened onto the parent unless you set preserve-3d.
Use it on a parent when children need a shared 3D scene — cubes, card stacks, or layered rotate/translateZ effects.
For visible depth, yes. Set perspective on an ancestor (or use perspective() in a transform) so 3D children look three-dimensional.
No. Set it on each element whose children should preserve 3D space.
It is Baseline and widely available since about September 2015 (Chrome 12+, Firefox 10+, Safari 4+). It is not supported in Internet Explorer. It is a browser CSS property, not a Node.js feature.

Next: transition

Animate property changes smoothly over time.

transition tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS transform-origin Property CSS transition Property