變形樣式transform-style

Setting how children of an element are rendered in the 3D space.

Overview

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>

@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@sm transform-style:flat@print">...</div>