[ @sdxc/u/transform ]

perspective

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

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

import { perspective } from "@sdxc/u/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:

perspective(150)

perspective(400)

perspective(1000)

<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"):

perspective("12rem")

perspective("40rem")

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

perspective("none")

perspective(300)

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

u.hover(u.perspective())

Responsive design

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

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

Signature

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