# perspective

> Sets how far the viewer is from the z=0 plane; without it, 3D rotation reads as a flat scale, not depth.

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

Sets how far the viewer is from the z=0 plane; without it, 3D rotation
reads as a flat scale, not depth. Goes on the **parent**, alongside
`u.transformStyle()`, as its own CSS property outside the composed `transform`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.perspective()` | `css({ perspective: "800px" })` |
| `u.perspective(400)` | `css({ perspective: "400px" })` |
| `u.perspective("none")` | `css({ perspective: "none" })` |
| `u.perspective("50rem")` | `css({ perspective: "50rem" })` |

## Examples

### Basic example

Use `perspective(n)` on the parent of a 3D-transformed element to set how far away the viewer is, in pixels; closer reads as more dramatic:

```tsx
<div mix={[...]}>
	<div mix={[perspective(150), ...]}>
		<div mix={[rotateX(45), ...]}>perspective(150)</div>
	</div>
	<div mix={[perspective(400), ...]}>
		<div mix={[rotateX(45), ...]}>perspective(400)</div>
	</div>
	<div mix={[perspective(1000), ...]}>
		<div mix={[rotateX(45), ...]}>perspective(1000)</div>
	</div>
</div>
```

### Using other lengths

Pass a string to use any CSS length, like `perspective("12rem")`:

```tsx
<div mix={[...]}>
	<div mix={[perspective("12rem"), ...]}>
		<div mix={[rotateX(45), ...]}>perspective("12rem")</div>
	</div>
	<div mix={[perspective("40rem"), ...]}>
		<div mix={[rotateX(45), ...]}>perspective("40rem")</div>
	</div>
</div>
```

### Removing perspective

Use `perspective("none")` to remove the depth, so a 3D rotation reads as a flat squash:

```tsx
<div mix={[...]}>
	<div mix={[perspective("none"), ...]}>
		<div mix={[rotateX(45), ...]}>perspective("none")</div>
	</div>
	<div mix={[perspective(300), ...]}>
		<div mix={[rotateX(45), ...]}>perspective(300)</div>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.perspective())
```

## Responsive design

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

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

## Signature

```ts
u.perspective(value?: number | (string & {}))
```