# skewX

> Skews the element along the horizontal axis.

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

Skews the element along the horizontal 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.skewX(10)` | `css({ "--ui-skew-x": "10deg", transform: "... skew(var(--ui-skew-x, 0deg), var(--ui-skew-y, 0deg))" })` |

## Examples

### Basic example

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

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

### Using negative values

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

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

### Skewing both axes

Combine `skewX()` with `skewY()` to slant an element along both axes:

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

## Using a custom value

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

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

## Applying on a state

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

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

## Responsive design

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

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

## Signature

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