Transforms
transform-style
Setting how children of an element are rendered in the 3D space.
Overview
| Class | Declarations |
|---|---|
transform-style:flat | transform-style: flat;
|
transform-style:preserve-3d | transform-style: preserve-3d;
|
transform-style:<value> | transform-style: <value>;
|
Examples
Preserve 3D children
Use transform-style:preserve-3d on the parent when transformed children should keep their 3D position instead of being flattened into the parent plane.
<div class="transform-style:preserve-3d"> <div class="transform:translateZ(24px)">Front layer</div></div>Generated CSS
@layer utilities { .transform-style\:preserve-3d { transform-style: preserve-3d }}Flatten nested transforms
Use transform-style:flat when children should render in the same plane as the parent.
<div class="transform-style:flat"> <div class="transform:rotateY(20deg)">Flattened child</div></div>Combine with perspective
transform-style:* does not add perspective by itself. Add perspective through transform:* or a component style when depth should be visible.
<div class="transform:perspective(800px) transform-style:preserve-3d"> 3D scene</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="transform-style:preserve-3d:hover transform-style:flat@print transform-style:flat@sm">...</div>