# rotate

> Rotates the element in its own 2D plane.

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

Rotates the element in its own 2D plane. A bare number is treated as
degrees; a string passes through unchanged (e.g. `"0.25turn"`).
Composable with every other `transform/` utility.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.rotate(45)` | `css({ "--ui-rotate": "45deg", transform: "... rotate(var(--ui-rotate, 0deg)) ..." })` |

## Examples

### Basic example

Use `rotate(n)` with a number of degrees, like `rotate(45)` or `rotate(90)`, to turn an element in its own plane:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[rotate(45), ...]}>rotate(45)</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate(90), ...]}>rotate(90)</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate(210), ...]}>rotate(210)</div>
	</div>
</div>
```

### Using negative values

Pass a negative number, like `rotate(-15)`, to turn an element counterclockwise:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[rotate(-15), ...]}>rotate(-15)</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate(-45), ...]}>rotate(-45)</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate(15), ...]}>rotate(15)</div>
	</div>
</div>
```

### Using other angle units

Pass a string to use any CSS angle unit, like `rotate("0.125turn")` or `rotate("1rad")`:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[rotate("0.125turn"), ...]}>rotate("0.125turn")</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate("1rad"), ...]}>rotate("1rad")</div>
	</div>
	<div mix={[...]}>
		<div mix={[rotate("50grad"), ...]}>rotate("50grad")</div>
	</div>
</div>
```

### Applying on hover

Wrap it in `hover()` and add a `transition("transform")` to turn an element when the pointer is over it. Hover the tile to try it:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[hover(rotate(12)), transition("transform"), ...]}>hover me</div>
	</div>
</div>
```

## Using a custom value

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

```ts
u.rotate("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.rotate(45))
```

## Responsive design

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

```ts
u.at("md", u.rotate(45))
```

## Signature

```ts
u.rotate(value: AngleValue)
```