[ @sdxc/u/transform ]

scaleX

Scales the element along the horizontal axis only.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.scaleX(1.5)`	`css({ "--ui-scale-x": "1.5", transform: "... scale(var(--ui-scale-x, 1), var(--ui-scale-y, 1)) ..." })`

Examples

Basic example

Use scaleX(n) with a unitless factor to resize an element horizontally while its height stays the same:

scaleX(0.5)

scaleX(1)

scaleX(1.5)

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleX(0.5), ...]}>scaleX(0.5)</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleX(1), ...]}>scaleX(1)</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleX(1.5), ...]}>scaleX(1.5)</div>
	</div>
</div>

Mirroring horizontally

Use scaleX(-1) to flip an element left to right, like pointing an arrow the other way:

→ arrow

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleX(1), ...]}>→ arrow</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleX(-1), ...]}>→ arrow</div>
	</div>
</div>

Scaling each axis

Combine scaleX() with scaleY() to resize each axis by its own factor:

1.25 × 0.75

0.75 × 1.25

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleX(1.25), scaleY(0.75), ...]}>1.25 × 0.75</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleX(0.75), scaleY(1.25), ...]}>0.75 × 1.25</div>
	</div>
</div>

Using a custom value

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

u.scaleX("2.75rem")

Applying on a state

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

u.hover(u.scaleX(1.5))

Responsive design

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

u.at("md", u.scaleX(1.5))

Signature

u.scaleX(value: ScaleValue)