[ @sdxc/u/transform ]

skewX

Skews the element along the horizontal axis.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

skewX(6)

skewX(12)

skewX(24)

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

skewX(-6)

skewX(-12)

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

12 / 6

-12 / -6

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

u.skewX("2.75rem")

Applying on a state

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

u.hover(u.skewX(10))

Responsive design

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

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

Signature

u.skewX(value: AngleValue)