[ @sdxc/u/transform ]

skewY

Skews the element along the vertical axis.

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

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

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:

skewY(6)

skewY(12)

skewY(24)

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

skewY(-6)

skewY(-12)

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

skewY("0.05turn")

skewY("0.2rad")

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

u.skewY("2.75rem")

Applying on a state

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

u.hover(u.skewY(10))

Responsive design

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

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

Signature

u.skewY(value: AngleValue)