[ @sdxc/u/transform ]

translate

Sets the standalone translate property outright, since at most one value is ever active at a time.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.translateProperty("-50% 0")`	`css({ translate: "-50% 0" })`

Examples

Basic example

Use translateProperty() with a CSS translate value to move an element on both axes in one declaration:

1rem 0.5rem

-25% 0

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[translateProperty("1rem 0.5rem"), ...]}>1rem 0.5rem</div>
	</div>
	<div mix={[...]}>
		<div mix={[translateProperty("-25% 0"), ...]}>-25% 0</div>
	</div>
</div>

Centring on a point

A percentage is a share of the element's own size, so translateProperty("50% -50%") centres an absolutely positioned badge on its parent's corner:

Inbox3

<div mix={[relative(), ...]}>
	Inbox
	<span mix={[absolute(), insTop(0), insRight(0), translateProperty("50% -50%"), ...]}>
		3
	</span>
</div>

Combining with transforms

The translate property applies before transform, so translateProperty() combines with rotate() and the other transform utilities:

both

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[translateProperty("1rem 0"), rotate(15), ...]}>both</div>
	</div>
</div>

Applying on a state

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

u.hover(u.translateProperty("-50% 0"))

Responsive design

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

u.at("md", u.translateProperty("-50% 0"))

Signature

u.translateProperty(value: string)