transform

translateY

Translates the element along the block axis using the spacing scale or a raw CSS length.

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.translateY(4)`	`css({ "--ui-translate-y": "calc(var(--ui-spacing, 0.25rem) * 4)", transform: "translate(var(--ui-translate-x, 0), var(--ui-translate-y, 0)) ..." })`

Every scale argument also takes a raw CSS value, which passes through untouched.

u.translateY("2.75rem")

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

u.hover(u.translateY(4))

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

u.at("md", u.translateY(4))

The custom properties this utility reads, which a theme redefines.

u.translateY(value: SpacingValue)