# 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`.

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

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`.

## 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:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.transformStyle())
```

## Responsive design

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

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

## Signature

```ts
u.transformStyle(value?: TransformStyleValue)
```