transform-style

Overview

The transform-style property regulates how nested elements are rendered in 3D space. It determines whether child elements keep their 3D positioning or are flattened onto the plane of their parent element. Typically, this property is used when transforms are nested, working alongside the transform property to control the 3D positioning of child elements.

Examples and Usage

To grasp the utility of transform-style, we'll explore an example where a parent element and its child are subjected to a 3D rotation effect.

HTML Structure

<div class="parent-element">
  <div class="child-element"></div>
</div>

CSS Styling

Following that, we'll apply 3D transformations to both the parent and child elements, alongside additional styling.

.parent-element {
    height: 100px;
    padding: 10px;
    background-color: #FBBF24;
    transform: rotateY(70deg); /* Apply 3D rotation to parent */
    transform-style: preserve-3d; /* Retain 3D positioning of child */
}

.child-element {
    width: 300px;
    padding: 50px;
    background-color: #CD3333;
    transform: rotateY(-20deg); /* Apply 3D rotation to child */
}

In the example above, we first apply a rotation of 70 degrees along the Y-axis to the parent div. Next, we use transform-style: preserve-3d; on the parent, instructing the browser to maintain the 3D position of the child element within the transformed space of the parent. Finally, we apply a rotation of -20 degrees along the Y-axis to the child div. This rotation, set against the transformed space of the parent, results in a rudimentary 3D interaction between the two elements.

Values

The transform-style property accepts the following values:

Associated Properties

• transform-box
• transform-origin
• transform
• perspective

Tips and Tricks

• Be aware that a value other than preserve-3d for the transform-style property establishes a new stacking context.

• The effects of transform-style: preserve-3d can be overridden by certain CSS properties. These include overflow (with a value other than visible), filter, clip, clip-path, mask-image, mask-box-source, and mix-blend-mode (all with values other than none or normal). Hence, if you want to maintain 3D positioning, ensure that the container of the elements doesn't have any of these properties set with these specific values.

• The transform-style property doesn't inherit, so apply it to any descendants that have children you want to transform in 3D space.

Browser Compatibility

Older versions of Chrome, Safari, Firefox, and Opera require vendor prefixes for proper functioning. (see more in Useful Resources below)

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: transform-style

CSS Transforms Module Level 2 Specification - transform-style