CSS transform-style Property

What You’ll Learn

The transform-style property decides whether nested elements stay in 3D space or get flattened — essential for cubes, flips, and layered 3D scenes.

Introduction

The transform-style property in CSS is used to specify how nested elements are rendered in 3D space. It determines whether the children of an element are flattened into the plane of the element itself or whether they retain their 3D position relative to the parent.

This property is particularly useful when working with 3D transforms and creating 3D effects on web pages.

Definition and Usage

Use transform-style: preserve-3d on a parent container when child elements each have their own 3D transforms and must appear as one cohesive 3D object — like a cube made from six faces.

📝 Syntax

The syntax for the transform-style property is simple. It can be applied to any element that supports transforms.

element {
  transform-style: value;
}

Basic Example

.cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
}

Syntax Rules

• Only two keyword values: flat and preserve-3d.
• Apply on the direct parent of 3D-transformed children.
• Pair with perspective on a parent for visible depth.
• Child faces usually need position: absolute and their own transform.
• The property is not inherited.

Related Properties

• transform — moves and rotates elements in 2D/3D
• perspective — sets viewing distance for 3D scenes
• transform-origin — sets the pivot for transforms
• backface-visibility — hides the reverse side during 3D flips

🎯 Default Value

The default value of the transform-style property is flat. This means that by default, the children of an element are rendered in the 2D plane of the parent element.

💎 Property Values

The transform-style property accepts two keyword values.

When to Use transform-style

transform-style is required when nested elements must share one 3D scene:

• 3D cubes and boxes — Six faces positioned with translateZ and rotations.
• Card flip animations — Front and back faces rotate in 3D space.
• Layered 3D galleries — Multiple panels at different Z depths.
• Product showcases — Rotating objects built from child elements.

Examples Gallery

In this example, we’ll create a 3D cube using the transform-style property set to preserve-3d to maintain the 3D positioning of the cube faces.

<style>
  .cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
  }
  .cube-face {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
  }
  .front { transform: translateZ(50px); }
  /* back, left, right, top, bottom faces... */
</style>

<div class="cube">
  <div class="cube-face front"></div>
  <!-- other faces -->
</div>

.scene-flat {
  transform-style: flat;
  transform: rotateY(45deg);
}

.scene-3d {
  transform-style: preserve-3d;
  transform: rotateY(45deg);
}

.flip-inner {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.scene {
  perspective: 800px;
}

.object {
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(-30deg);
}

♿ Accessibility

• Reduced motion — Disable or simplify 3D flip animations when prefers-reduced-motion: reduce is set.
• Do not rely on 3D alone — Ensure content is readable without hover or rotation effects.
• Avoid disorientation — Heavy 3D motion on large areas can distract or confuse users.
• Keyboard access — Flippable cards should be operable without hover-only interaction.

The 3D transform stack

A working 3D effect usually combines perspective on an ancestor, transform-style: preserve-3d on the parent, and individual transform values on children.

.scene { perspective: 600px; }
.cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
}
.face { transform: translateZ(50px); }

💡 Best Practices