🎯 CSS transform-style Property

The transform-style property determines how nested elements behave when 3D transformations are applied. It controls whether child elements remain in true 3D space or are flattened into a two-dimensional plane.

This property is especially important when creating advanced 3D effects, animations, cubes, cards, and other interactive user interface components using CSS transforms.

When a parent element contains child elements with 3D transformations, the transform-style property determines how those child elements are rendered.

• Controls the rendering of nested transformed elements
• Allows true 3D depth effects
• Works together with perspective and transform properties
• Essential for realistic 3D animations

This is the default value. Child elements are flattened into a 2D plane, even if they contain 3D transformations.

.container {
    transform-style: flat;
}
                

With this value, nested elements do not maintain independent 3D depth.

Preserves the 3D position of child elements and allows them to exist in the same three-dimensional space as the parent element.

.container {
    transform-style: preserve-3d;
}
                

This value is commonly used when creating 3D cubes, rotating cards, carousels, and immersive visual effects.

Resets the property to its default value.

.container {
    transform-style: initial;
}
                

The following example demonstrates how to preserve 3D depth for child elements.

.scene {
    perspective: 800px;
}

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

.face {
    transform: translateZ(50px);
}
                

Because the cube uses preserve-3d, each face maintains its depth position and creates a realistic 3D appearance.

The transform-style property is essential for modern 3D web design. Without it, nested elements lose their depth information and appear flattened.

• Create realistic 3D interfaces
• Build CSS cubes and 3D objects
• Improve animations and visual effects
• Preserve child element depth
• Enhance user experience with immersive designs