[ @sdxc/u/transform ]

transform-style

Sets the standalone transform-style property outright on the **parent** of 3D-transformed children, since CSS defaults to flat; an overflow, filter, mask, or opacity below 1 on the element silently forces it back to flat.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { transformStyle } from "@sdxc/u/transform";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.transformStyle()`	`css({ transformStyle: "preserve-3d" })`
`u.transformStyle("flat")`	`css({ transformStyle: "flat" })`

Examples

Basic example

Use transformStyle() on the parent of 3D-transformed children so they keep their depth, like the two faces of a flip card. Hover the card to flip it:

Front

Back

<div mix={[perspective(800), ...]}>
	<div
		mix={[
			transformStyle(),
			hover(rotateY(180)),
			transition("transform", { duration: 600 }),
			zstack(),
		]}
	>
		<div mix={[backfaceVisibility(), ...]}>Front</div>
		<div mix={[rotateY(180), backfaceVisibility(), ...]}>Back</div>
	</div>
</div>

Flattening children

Use transformStyle("flat") to paint the children into the parent's plane: turned around, the card shows its front mirrored instead of its back face:

Front

Back

transformStyle("flat")

Front

Back

transformStyle()

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[perspective(800), ...]}>
			<div mix={[transformStyle("flat"), rotateY(180), zstack()]}>
				<div mix={[backfaceVisibility(), ...]}>Front</div>
				<div mix={[rotateY(180), backfaceVisibility(), ...]}>Back</div>
			</div>
		</div>
		<p mix={[...]}>transformStyle("flat")</p>
	</div>
	<div mix={[...]}>
		<div mix={[perspective(800), ...]}>
			<div mix={[transformStyle(), rotateY(180), zstack()]}>
				<div mix={[backfaceVisibility(), ...]}>Front</div>
				<div mix={[rotateY(180), backfaceVisibility(), ...]}>Back</div>
			</div>
		</div>
		<p mix={[...]}>transformStyle()</p>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.transformStyle())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.transformStyle())

Signature

u.transformStyle(value?: TransformStyleValue)