# perspective-origin

> Moves the vanishing point that `u.perspective()` establishes, aiming the 3D effect off-centre; set it on the same parent element that carries `u.perspective()`.

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

Moves the vanishing point that `u.perspective()` establishes, aiming the
3D effect off-centre; set it on the same parent element that carries
`u.perspective()`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.perspectiveOrigin()` | `css({ perspectiveOrigin: "center" })` |
| `u.perspectiveOrigin("top left")` | `css({ perspectiveOrigin: "top left" })` |
| `u.perspectiveOrigin("25% 75%")` | `css({ perspectiveOrigin: "25% 75%" })` |

## Examples

### Basic example

Use `perspectiveOrigin()` beside `perspective()` on the parent to move the vanishing point, like `perspectiveOrigin("top left")`:

```tsx
<div mix={[...]}>
	<div mix={[perspective(250), perspectiveOrigin("top left"), ...]}>
		<div mix={[rotateY(45), ...]}>top left</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("center"), ...]}>
		<div mix={[rotateY(45), ...]}>center</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("bottom right"), ...]}>
		<div mix={[rotateY(45), ...]}>bottom right</div>
	</div>
</div>
```

### Using an edge

Pass a single edge, like `perspectiveOrigin("left")`, to move the vanishing point along one axis and centre it on the other:

```tsx
<div mix={[...]}>
	<div mix={[perspective(250), perspectiveOrigin("left"), ...]}>
		<div mix={[rotateY(45), ...]}>left</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("right"), ...]}>
		<div mix={[rotateY(45), ...]}>right</div>
	</div>
</div>
```

### Using custom values

Pass any CSS position, like `perspectiveOrigin("25% 75%")` or `perspectiveOrigin("-4rem 0")`, to place the vanishing point exactly:

```tsx
<div mix={[...]}>
	<div mix={[perspective(250), perspectiveOrigin("25% 75%"), ...]}>
		<div mix={[rotateY(45), ...]}>25% 75%</div>
	</div>
	<div mix={[perspective(250), perspectiveOrigin("-4rem 0"), ...]}>
		<div mix={[rotateY(45), ...]}>-4rem 0</div>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.perspectiveOrigin())
```

## Responsive design

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

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

## Signature

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