# translate

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

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

Sets the standalone `translate` property outright, since at most one
value is ever active at a time. Accepts raw CSS shorthand — offsets or a
keyword like `none` — for percentages and multi-axis values.

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

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

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

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

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

## Responsive design

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

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

## Signature

```ts
u.translateProperty(value: string)
```