CSS transform-style Property

The CSS transform-style property is used to specify if the children of a given element are positioned in the 3D space or are flattened in the plane of the element. If flattened, the children will not exist on their own in the 3D-space. This property is mostly used when transforms are nested. In such cases, it can be used to preserve the 3D space of an element that is transformed in its parent’s 3D space.

The initial value of CSS transform-style property is flat. You can only apply it to transformable elements. This property is not inheritable. The final computed value of the transform-style property is the exact same value that you initially supplied. This property is not animatable.

You should note that some CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied. In such cases, the used value of transform-style is forced to be flat. Here is a list of all such property values:

  • overflow: any value other than visible.
  • opacity: any value less than 1.
  • filter: any value other than none.
  • clip: any value other than auto.
  • clip-path: any value other than none.
  • isolation: used value of isolate.
  • mask-image: any value other than none.
  • mask-border-source: any value other than none.
  • mix-blend-mode: any value other than normal.

Syntax

This is the formal syntax for using transform-style property.

transform-style: flat | preserve-3d

Here are some examples of using this property.

/* Keyword values */
transform-style: preserve-3d;
transform-style: flat;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: unset;

Acceptable Values

flat

This value is used to flatten the children of the element so that they are lying in the plane of the element itself.

preserve-3d

This value is used to allow the children of the element to be positioned in the three-dimensional space.

Working Examples

See the Pen CSS transform-style Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The following table shows the browser support for the transform-style property, including notes on partial support.

Further Reading

  1. Read more about the CSS <transform-style> property on MDN.
  2. You can also read the CSS <transform-style> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top