# skewY

> Skews the element along the vertical axis.

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

Skews the element along the vertical axis. A bare number is treated as
degrees; a string passes through unchanged. Composable with every other
`transform/` utility.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.skewY(10)` | `css({ "--ui-skew-y": "10deg", transform: "... skew(var(--ui-skew-x, 0deg), var(--ui-skew-y, 0deg))" })` |

## Examples

### Basic example

Use `skewY(n)` with a number of degrees to slant an element along its vertical axis:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[skewY(6), ...]}>skewY(6)</div>
	</div>
	<div mix={[...]}>
		<div mix={[skewY(12), ...]}>skewY(12)</div>
	</div>
	<div mix={[...]}>
		<div mix={[skewY(24), ...]}>skewY(24)</div>
	</div>
</div>
```

### Using negative values

Pass a negative number, like `skewY(-12)`, to slant an element the other way:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[skewY(-6), ...]}>skewY(-6)</div>
	</div>
	<div mix={[...]}>
		<div mix={[skewY(-12), ...]}>skewY(-12)</div>
	</div>
</div>
```

### Using other angle units

Pass a string to use any CSS angle unit, like `skewY("0.05turn")`:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[skewY("0.05turn"), ...]}>skewY("0.05turn")</div>
	</div>
	<div mix={[...]}>
		<div mix={[skewY("0.2rad"), ...]}>skewY("0.2rad")</div>
	</div>
</div>
```

## Using a custom value

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

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

## Applying on a state

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

```ts
u.hover(u.skewY(10))
```

## Responsive design

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

```ts
u.at("md", u.skewY(10))
```

## Signature

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