# transform-origin

> Sets the pivot point for every transform on the element.

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

Sets the pivot point for every transform on the element. It's its own CSS
property, set outright rather than joining the additive `transform`
composition. Values are physical only — drive an RTL-flipping origin from a custom property.

## 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")`:

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

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

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

```ts
u.hover(u.transformOrigin())
```

## Responsive design

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

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

## Signature

```ts
u.transformOrigin(value?: TransformOriginValue)
```