Transforms

Transform utilities move, scale, rotate and skew an element without changing the layout around it. Every utility sets one internal custom property and writes the same combined transform, so a translate, a scale and a rotate on one element add up instead of replacing each other.

How transforms work

One transform, many parts. Each utility sets one property, such as --nu-translate-x or --nu-rotate, and writes a transform that reads all of them. translate-x-4 rotate-45 scale-110 moves, rotates and scales the same element.
Registered properties. The transform properties are registered with @property and inherits: false. A child of a rotated element does not pick up its parent’s rotation, and a property that is not set takes its initial value (0, 0deg or 1).
Spacing keys for distance. Translate classes and mixins read the spacing scale: translate-x-4 is var(--nu-space-4), the same distance as p-4. Keys with a p suffix are percentages of the element’s own size: translate-x-50p is 50%.
Keys for scale. Scale keys are percentages written without the sign: scale-150 is a factor of 1.5.

Part	Sets	Examples
`translate-x`, `translate-y`	`--nu-translate-x`, `--nu-translate-y`	`translate-x-4`, `-translate-y-50p`
`scale`, `scale-x`, `scale-y`	`--nu-scale-x` and `--nu-scale-y`, or one of them	`scale-110`, `scale-x-50`
`rotate`	`--nu-rotate`	`rotate-90`, `-rotate-45`
`origin`	`transform-origin`	`origin-top-left`

The combined declaration that every transform utility writes:

transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));

The order is fixed: translate, then rotate, then skew, then scale. A translate therefore moves the element along the page axes, not along its rotated axes.

Translate

Translate moves an element from where the layout placed it. Its neighbours keep their positions, so a translated element can overlap them.

translate-x-4

translate-y-2

-translate-y-2

No transform

HTML
SCSS

<div class="flex wrap gap-6 p-4 bg-alternate rounded">
  <div class="translate-x-4 p-3 bg-brand text-on-brand rounded">translate-x-4</div>
  <div class="translate-y-2 p-3 bg-brand text-on-brand rounded">translate-y-2</div>
  <div class="-translate-y-2 p-3 bg-brand text-on-brand rounded">-translate-y-2</div>
  <div class="p-3 bg-surface border rounded">No transform</div>
</div>

.drawer {
  @include apply(translate-x(4));
}
.badge {
  @include apply(translate-y(-2));
}

A leading - gives the negative class: -translate-x-4 outputs calc(-1 * var(--nu-space-4)). translate-x-0 has no negative class.

Fractions

Fraction keys move the element by a share of its own width or height. -translate-x-50p with left-50p centres an element horizontally on its parent.

Key	Value
`25p`, `33p`, `50p`	`25%`, `33.333%`, `50%`
`66p`, `75p`, `100p`	`66.667%`, `75%`, `100%`

left-50p -translate-x-50p

HTML
SCSS

<div class="relative p-8 bg-alternate rounded">
  <div class="absolute left-50p top-0 -translate-x-50p p-2 bg-brand text-on-brand rounded">left-50p -translate-x-50p</div>
</div>

.tooltip {
  @include apply(absolute, left(50p), translate-x(-50p));
}

Scale

Scale classes take keys that read as percentages. scale sets both axes; scale-x and scale-y set one.

Key	`0`	`50`	`75`	`90`	`95`	`100`	`105`	`110`	`125`	`150`
Factor	`0`	`0.5`	`0.75`	`0.9`	`0.95`	`1`	`1.05`	`1.1`	`1.25`	`1.5`

scale-75

scale-110

scale-x-50

scale-y-125

HTML
SCSS

<div class="flex wrap gap-6 p-4 bg-alternate rounded">
  <div class="scale-75 p-3 bg-brand text-on-brand rounded">scale-75</div>
  <div class="scale-110 p-3 bg-brand text-on-brand rounded">scale-110</div>
  <div class="scale-x-50 p-3 bg-brand text-on-brand rounded">scale-x-50</div>
  <div class="scale-y-125 p-3 bg-brand text-on-brand rounded">scale-y-125</div>
</div>

.thumb {
  @include apply(scale(105) hover, transition-transform);
}

Rotate

Rotate classes take an angle in degrees: 0, 45, 90, 180 and 270. Negative classes rotate anticlockwise: -rotate-45, -rotate-90, -rotate-180, -rotate-270.

rotate-45

rotate-90

-rotate-45

HTML
SCSS

<div class="flex wrap gap-6 p-4 bg-alternate rounded">
  <div class="rotate-45 p-3 bg-brand text-on-brand rounded">rotate-45</div>
  <div class="rotate-90 p-3 bg-brand text-on-brand rounded">rotate-90</div>
  <div class="-rotate-45 p-3 bg-brand text-on-brand rounded">-rotate-45</div>
</div>

.chevron {
  @include apply(rotate(180deg) hover);
}

Skew

Skew has no classes. Use the skew-x() and skew-y() mixins with an angle.

.ribbon {
  @include apply(skew-x(6deg));
}

Combining transforms

Because each utility sets its own property, transforms on the same element combine, including across states. Below, the base translate stays in place while hover adds a rotation and a scale.

Hover

HTML
SCSS

<div class="p-6 bg-alternate rounded">
  <div class="transition-transform translate-x-4 hover:rotate-45 hover:scale-110 w-16 p-3 bg-brand text-on-brand rounded cursor-pointer">Hover</div>
</div>

.card {
  @include apply(transition-transform, translate-x(4), rotate(45deg) hover, scale(110) hover);
}

A child of a transformed element is still moved with its parent, because the parent’s box is transformed. What the child does not inherit is the property: a child of a rotate-45 element that sets only scale-110 gets --nu-rotate: 0deg in its own transform, so the rotation is not applied twice.

Transform origin

The origin is the fixed point of a rotation or a scale. The default is the centre of the element.

Class	Value
`origin-center`	`center`
`origin-top`, `origin-right`, `origin-bottom`, `origin-left`	`top`, `right`, `bottom`, `left`
`origin-top-left`, `origin-top-right`	`top left`, `top right`
`origin-bottom-left`, `origin-bottom-right`	`bottom left`, `bottom right`

origin-center

origin-top-left

HTML
SCSS

<div class="flex wrap gap-8 p-6 bg-alternate rounded">
  <div class="origin-center rotate-45 p-3 bg-brand text-on-brand rounded">origin-center</div>
  <div class="origin-top-left rotate-45 p-3 bg-brand text-on-brand rounded">origin-top-left</div>
</div>

.menu {
  @include apply(origin(top-left), scale(95));
}

The origin() mixin accepts the class keys and transform-origin values: origin(top-left) gives top left, like .origin-top-left, and origin(50% 100%) is written as given. A value has one to three parts, each a position keyword, a length, a percentage, calc() or var(); this also holds for a quoted value (origin("var(--x) 50%")) and in a namespaced nu.apply(). Any other part raises an error.

Responsive and state variants

Translate, scale, rotate and origin classes have responsive variants with an @{breakpoint} suffix, applied from the breakpoint upwards. They also have hover: and group-hover: variants, which combine with a breakpoint: hover:scale-110@md.

rotate-90@md

group-hover:translate-x-4

<div class="flex wrap gap-6 p-4 bg-alternate rounded">
  <div class="rotate-0 rotate-90@md p-3 bg-brand text-on-brand rounded">rotate-90@md</div>
  <div class="group p-3 bg-surface border rounded cursor-pointer">
    <div class="transition-transform group-hover:translate-x-4 p-2 bg-brand text-on-brand rounded">group-hover:translate-x-4</div>
  </div>
</div>

Suffix	Media query
`@xs`	`@media (min-width: 480px)`
`@sm`	`@media (min-width: 640px)`
`@md`	`@media (min-width: 768px)`
`@lg`	`@media (min-width: 1024px)`
`@xl`	`@media (min-width: 1280px)`
`@2xl`	`@media (min-width: 1536px)`

In SCSS, put the state and the breakpoint after the mixin inside apply(): apply(scale(110) hover md). For a group hover, write the parent selector yourself:

.card:hover .card__icon {
  @include apply(translate-x(1));
}

SCSS

Each transform has a mixin. Every mixin sets its property and writes the combined transform.

@use "@nuvoui/core" as *;

.panel {
  @include apply(translate-y(2), scale(150));
}

.panel {
  --nu-translate-y: var(--nu-space-2);
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
  --nu-scale-x: 1.5;
  --nu-scale-y: 1.5;
  transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y));
}

Mixin	Sets
`translate($x, $y: null)`	`--nu-translate-x`, and `--nu-translate-y` when `$y` is given
`translate-x($value)`, `translate-y($value)`, `translate-z($value)`	One translate property
`scale($value)`	`--nu-scale-x` and `--nu-scale-y`
`scale-x($value)`, `scale-y($value)`	One scale property
`rotate($angle)`	`--nu-rotate`
`skew-x($angle)`, `skew-y($angle)`	`--nu-skew-x`, `--nu-skew-y`
`origin($value)`	`transform-origin`, from an origin key or a CSS value
`apply-transform`	Only the combined `transform`

translate-z(), skew-x() and skew-y() have no classes.

Keys and custom values

Mixin	Accepts
`translate()`, `translate-x()`, `translate-y()`	Any `$spacings` key (`4` gives `var(--nu-space-4)`), a negated key (`-4` gives `calc(-1 * var(--nu-space-4))`), a fraction key (`50p`, `-50p`), a length, a percentage, `calc()` or `var()`
`translate-z()`	A `$spacings` key, a negated key, a length, `calc()` or `var()`
`scale()`, `scale-x()`, `scale-y()`	A scale key (`150` gives `1.5`), a factor (`1.5`), a percentage or `var()`
`rotate()`	A rotation key like the classes (`45` gives `45deg`, `-45` gives `-45deg`; keys `0`, `45`, `90`, `180`, `270`), an angle with a unit (`30deg`, `0.25turn`), `calc()` or `var()`
`skew-x()`, `skew-y()`	An angle with a unit (`6deg`), `calc()`, `var()` or `0` (`0deg`)
`origin()`	An origin key (`center`, `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`) or one to three parts that are position keywords, lengths, percentages, `calc()` or `var()` (`top left`, `50% 100%`, `var(--x) 50%`)

Translate classes cover the spacing keys 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 and 20 (those present in $spacings) plus the fractions. The mixins accept every key of $spacings, so translate-x(32) gives var(--nu-space-32) even though there is no .translate-x-32 class.

Scale keys win over factors: scale(150) is 1.5, scale(100) is 1 and scale(50) is 0.5, exactly like the classes. A number that is not a key is used as a factor, so scale(1.5) is also 1.5.

.hero {
  @include apply(translate-x(32), translate-y(1.5rem), scale(1.02), rotate(-3deg));
}

Using the properties directly

Set a transform property yourself and include apply-transform to write the combined transform. This is useful in keyframes or when a value comes from another custom property.

.icon {
  --nu-rotate: 90deg;
  @include apply-transform;
}

Configuration

Translate classes and mixins follow $spacings: change the scale there, and the translate keys follow. A translate class is generated only for the listed keys that exist in your map. The scale, rotate and origin keys are fixed.

Turn the classes off with the transforms feature flag. The mixins stay available.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $feature-flags: ("transforms": false)
);

The @property registrations do not depend on $generate-utility-classes or on any feature flag: they are emitted whenever core is loaded, because the transform mixins and absolute-center read the properties without fallbacks.

Errors

Input	Error
`translate-x(7)`	`translate-x: 7 is not a spacing key. Use a key (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64), a fraction key (25p, 33p, 50p, 66p, 75p, 100p) or a value with a unit.`
`rotate(7)`	`rotate: 7 has no unit. Write a unit (7deg).`
`origin(foo)`	`origin: foo is not a transform-origin part. Use an $origin-values key (center, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left), position keywords (left, center, right, top, bottom), lengths, percentages, calc() or var().`
`skew-x(6)`	`skew-x: 6 has no unit. Write a unit (6deg).`

// error
.chevron {
  @include rotate(7);
}

CSS variables

These are internal properties set by the utilities, not tokens. token() does not accept them.

Variable	Syntax	Initial value
`--nu-translate-x`	`<length-percentage>`	`0`
`--nu-translate-y`	`<length-percentage>`	`0`
`--nu-translate-z`	`<length>`	`0`
`--nu-scale-x`	`<number> \| <percentage>`	`1`
`--nu-scale-y`	`<number> \| <percentage>`	`1`
`--nu-rotate`	`<angle>`	`0deg`
`--nu-skew-x`	`<angle>`	`0deg`
`--nu-skew-y`	`<angle>`	`0deg`

Each is registered with @property and inherits: false:

@property --nu-translate-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

Because the properties are registered with a type, an invalid value, such as an angle in --nu-translate-x, falls back to the initial value instead of breaking the whole transform.

Class reference

Generated from the compiled core build. Each class also has hover: and group-hover: variants in the same rule, and responsive variants that are not listed.

Translate (70 rules)

Scale (30 rules)

Rotate (9 rules)

Selector	Declarations	Default value
`.rotate-0`	`--nu-rotate: 0deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.rotate-45`	`--nu-rotate: 45deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`45deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.rotate-90`	`--nu-rotate: 90deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`90deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.rotate-180`	`--nu-rotate: 180deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`180deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.rotate-270`	`--nu-rotate: 270deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`270deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.-rotate-45`	`--nu-rotate: -45deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`-45deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.-rotate-90`	`--nu-rotate: -90deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`-90deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.-rotate-180`	`--nu-rotate: -180deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`-180deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.-rotate-270`	`--nu-rotate: -270deg` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`-270deg` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`

Origin (9 rules)

Selector	Declarations	Default value
`.origin-center`	`transform-origin: center`	`center`
`.origin-top`	`transform-origin: top`	`top`
`.origin-top-right`	`transform-origin: top right`	`top right`
`.origin-right`	`transform-origin: right`	`right`
`.origin-bottom-right`	`transform-origin: bottom right`	`bottom right`
`.origin-bottom`	`transform-origin: bottom`	`bottom`
`.origin-bottom-left`	`transform-origin: bottom left`	`bottom left`
`.origin-left`	`transform-origin: left`	`left`
`.origin-top-left`	`transform-origin: top left`	`top left`

Accessibility and RTL

Translate is physical. translate-x uses translateX(), so a positive value moves the element to the right in both directions. There is no logical translate. For an offset that should mirror in right-to-left layouts, use logical margins or offsets (ms-*, start-*) instead.
Rotation does not mirror. Positive angles turn clockwise in both directions. An arrow icon rotated to point forward needs the opposite rotation on a right-to-left page.
Layout is unchanged. A transformed element keeps its original box in the layout and in the reading order. Do not use transforms to reorder content; screen readers and keyboard focus follow the source order.
Motion. Transforms combined with transitions or animations create motion. The reset shortens transitions and animations under prefers-reduced-motion: reduce; see Transitions and Animations.

translate-x-8 moves right in both directions

LTR

x-8

RTL

x-8

<div class="p-2 bg-alternate rounded">
  <div class="translate-x-8 w-16 p-2 bg-brand text-on-brand rounded">x-8</div>
</div>

Selector	Declarations	Default value
`.scale-0`	`--nu-scale-x: 0` `--nu-scale-y: 0` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0` `0` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-0`	`--nu-scale-x: 0` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-0`	`--nu-scale-y: 0` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-50`	`--nu-scale-x: 0.5` `--nu-scale-y: 0.5` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.5` `0.5` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-50`	`--nu-scale-x: 0.5` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.5` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-50`	`--nu-scale-y: 0.5` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.5` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-75`	`--nu-scale-x: 0.75` `--nu-scale-y: 0.75` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.75` `0.75` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-75`	`--nu-scale-x: 0.75` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.75` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-75`	`--nu-scale-y: 0.75` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.75` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-90`	`--nu-scale-x: 0.9` `--nu-scale-y: 0.9` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.9` `0.9` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-90`	`--nu-scale-x: 0.9` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.9` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-90`	`--nu-scale-y: 0.9` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.9` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-95`	`--nu-scale-x: 0.95` `--nu-scale-y: 0.95` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.95` `0.95` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-95`	`--nu-scale-x: 0.95` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.95` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-95`	`--nu-scale-y: 0.95` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`0.95` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-100`	`--nu-scale-x: 1` `--nu-scale-y: 1` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1` `1` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-100`	`--nu-scale-x: 1` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-100`	`--nu-scale-y: 1` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-105`	`--nu-scale-x: 1.05` `--nu-scale-y: 1.05` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.05` `1.05` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-105`	`--nu-scale-x: 1.05` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.05` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-105`	`--nu-scale-y: 1.05` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.05` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-110`	`--nu-scale-x: 1.1` `--nu-scale-y: 1.1` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.1` `1.1` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-110`	`--nu-scale-x: 1.1` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.1` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-110`	`--nu-scale-y: 1.1` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.1` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-125`	`--nu-scale-x: 1.25` `--nu-scale-y: 1.25` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.25` `1.25` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-125`	`--nu-scale-x: 1.25` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.25` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-125`	`--nu-scale-y: 1.25` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.25` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-150`	`--nu-scale-x: 1.5` `--nu-scale-y: 1.5` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.5` `1.5` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-x-150`	`--nu-scale-x: 1.5` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.5` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`
`.scale-y-150`	`--nu-scale-y: 1.5` `transform: translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`	`1.5` `translateX(var(--nu-translate-x)) translateY(var(--nu-translate-y)) translateZ(var(--nu-translate-z)) rotate(var(--nu-rotate)) skewX(var(--nu-skew-x)) skewY(var(--nu-skew-y)) scaleX(var(--nu-scale-x)) scaleY(var(--nu-scale-y))`