[ @sdxc/u/transform ]

transform-origin

Sets the pivot point for every transform on the element.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.transformOrigin()`	`css({ transformOrigin: "center" })`
`u.transformOrigin("left")`	`css({ transformOrigin: "left" })`
`u.transformOrigin("bottom right")`	`css({ transformOrigin: "bottom right" })`
`u.transformOrigin("50% 50% 8px")`	`css({ transformOrigin: "50% 50% 8px" })`

Examples

Basic example

Use transformOrigin() to set the point an element's transforms pivot on, like transformOrigin("top left"):

center

top left

bottom right

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[rotate(20), transformOrigin("center"), ...]}>center</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate(20), transformOrigin("top left"), ...]}>top left</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate(20), transformOrigin("bottom right"), ...]}>bottom right</div>
	</div>
</div>

Growing from an edge

Pass a single edge, like transformOrigin("left"), and the element scales toward or away from that side:

left

top

bottom

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scale(0.6), transformOrigin("left"), ...]}>left</div>
	</div>
	<div mix={[...]}>
		<div mix={[scale(0.6), transformOrigin("top"), ...]}>top</div>
	</div>
	<div mix={[...]}>
		<div mix={[scale(0.6), transformOrigin("bottom"), ...]}>bottom</div>
	</div>
</div>

Using custom values

Pass any CSS position, like transformOrigin("25% 75%") or transformOrigin("-1rem -1rem"), to place the pivot exactly, even outside the element:

25% 75%

-1rem -1rem

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[rotate(20), transformOrigin("25% 75%"), ...]}>25% 75%</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate(20), transformOrigin("-1rem -1rem"), ...]}>-1rem -1rem</div>
	</div>
</div>

Applying on a state

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

u.hover(u.transformOrigin())

Responsive design

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

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

Signature

u.transformOrigin(value?: TransformOriginValue)