[ @sdxc/u/transform ]

perspective-origin

Moves the vanishing point that u.perspective() establishes, aiming the 3D effect off-centre; set it on the same parent element that carries u.perspective().

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.perspectiveOrigin()`	`css({ perspectiveOrigin: "center" })`
`u.perspectiveOrigin("top left")`	`css({ perspectiveOrigin: "top left" })`
`u.perspectiveOrigin("25% 75%")`	`css({ perspectiveOrigin: "25% 75%" })`

Examples

Basic example

Use perspectiveOrigin() beside perspective() on the parent to move the vanishing point, like perspectiveOrigin("top left"):

top left

center

bottom right

<div mix={[...]}>
	<div mix={[perspective(250), perspectiveOrigin("top left"), ...]}>
		<div mix={[rotateY(45), ...]}>top left</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("center"), ...]}>
		<div mix={[rotateY(45), ...]}>center</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("bottom right"), ...]}>
		<div mix={[rotateY(45), ...]}>bottom right</div>
	</div>
</div>

Using an edge

Pass a single edge, like perspectiveOrigin("left"), to move the vanishing point along one axis and centre it on the other:

left

right

<div mix={[...]}>
	<div mix={[perspective(250), perspectiveOrigin("left"), ...]}>
		<div mix={[rotateY(45), ...]}>left</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("right"), ...]}>
		<div mix={[rotateY(45), ...]}>right</div>
	</div>
</div>

Using custom values

Pass any CSS position, like perspectiveOrigin("25% 75%") or perspectiveOrigin("-4rem 0"), to place the vanishing point exactly:

25% 75%

-4rem 0

<div mix={[...]}>
	<div mix={[perspective(250), perspectiveOrigin("25% 75%"), ...]}>
		<div mix={[rotateY(45), ...]}>25% 75%</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("-4rem 0"), ...]}>
		<div mix={[rotateY(45), ...]}>-4rem 0</div>
	</div>
</div>

Applying on a state

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

u.hover(u.perspectiveOrigin())

Responsive design

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

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

Signature

u.perspectiveOrigin(value?: TransformOriginValue)