[ @sdxc/u/transform ]

scale

Sets the standalone scale CSS property directly — distinct from u.scale(), which sets the scale(...) transform function through the composable transform mechanism; overwrites outright, matching its use.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.scaleProperty(0.95)`	`css({ scale: "0.95" })`
`u.scaleProperty("none")`	`css({ scale: "none" })`

Examples

Basic example

Use scaleProperty(n) to set the standalone CSS scale property, which resizes an element apart from its transform:

0.75

1.25

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleProperty(0.75), ...]}>0.75</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleProperty(1), ...]}>1</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleProperty(1.25), ...]}>1.25</div>
	</div>
</div>

Scaling each axis

Pass a string with two factors, like scaleProperty("1.25 0.75"), to scale the horizontal and vertical axes apart:

1.25 0.75

0.75 1.25

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleProperty("1.25 0.75"), ...]}>1.25 0.75</div>
	</div>
	<div mix={[...]}>
		<div mix={[scaleProperty("0.75 1.25"), ...]}>0.75 1.25</div>
	</div>
</div>

Combining with transforms

The scale property applies on top of transform, so scaleProperty() combines with rotate() and the other transform utilities:

both

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[scaleProperty(0.75), rotate(20), ...]}>both</div>
	</div>
</div>

Pressing a button

Wrap it in active() to shrink a button while it is pressed, with a transition("scale") to ease it. Press the button to try it:

<button type="button" mix={[active(scaleProperty(0.95)), transition("scale"), ...]}>
	Press me
</button>

Using a custom value

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

u.scaleProperty("2.75rem")

Applying on a state

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

u.hover(u.scaleProperty(0.95))

Responsive design

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

u.at("md", u.scaleProperty(0.95))

Signature

u.scaleProperty(value: number | (string & {}))