Transform mixins

Transform utilities: translate (x, y, z), scale, rotate, skew (mixins only, no classes) and transform origin.

Each transform mixin sets its own --wu-* variable and writes one combined transform, so several transforms on an element compose.

Classes:

• translate-x-{key}/translate-y-{key}: Moves by a spacing key or a fraction key (25p, 33p, 50p, 66p, 75p, 100p); -translate-x-{key} negates
• scale-{key}/scale-x-{key}/scale-y-{key}: Scales by a factor key (0, 50, 75, 90, 95, 100, 105, 110, 125, 150)
• rotate-{key}/-rotate-{key}: Rotates by an angle key (0, 45, 90, 180, 270)
• origin-{key}: Sets transform-origin (top-left, center, bottom-right)

Interactive states: hover: and group-hover: variants exist for every class. Responsive: every class supports the @breakpoint suffix.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Transforms. The A to Z index lists every public mixin and function.

Source: utilities/_transforms.scss

Mixins

apply-transform translate-x translate-y translate-z translate scale-x scale-y scale rotate skew-x skew-y origin

apply-transform mixin

Writes the transform property that combines every --wu-translate-*, --wu-rotate, --wu-skew-* and --wu-scale-* variable; the transform mixins include it.

@mixin apply-transform

Output

transform: translateX(var(--wu-translate-x)) ... scaleY(var(--wu-scale-y)), with no fallbacks; unset variables use their @property initial values

Example

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

Compiled CSS

.icon {
  --wu-rotate: 90deg;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: translate, rotate, scale. Source: utilities/_transforms.scss:41

translate-x mixin

Moves the element along the x axis by setting --wu-translate-x and writing the combined transform.

A unitless number that is not a spacing key raises an error.

@mixin translate-x($value)

Parameter	Type	Default	Description
$value	Number|Length|String	Required	A $spacings key (4 gives var(--wu-space-4)), a negated key (-4 gives calc(-1 * token)), a fraction key (25p, -25p), a length, percentage, calc() or var()

Example 1

.drawer {
  @include translate-x(4);
}

Compiled CSS

.drawer {
  --wu-translate-x: var(--wu-space-4);
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

Example 2

.card {
  @include apply(translate-x(-50p) hover);
}

Compiled CSS

.card:hover {
  --wu-translate-x: -50%;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: translate, apply-transform. Source: utilities/_transforms.scss:150

translate-y mixin

Moves the element along the y axis by setting --wu-translate-y and writing the combined transform.

A unitless number that is not a spacing key raises an error.

@mixin translate-y($value)

Parameter	Type	Default	Description
$value	Number|Length|String	Required	A $spacings key (4 gives var(--wu-space-4)), a negated key (-4 gives calc(-1 * token)), a fraction key (25p, -25p), a length, percentage, calc() or var()

Example 1

.drawer {
  @include translate-y(-1);
}

Compiled CSS

.drawer {
  --wu-translate-y: calc(-1 * var(--wu-space-1));
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

Example 2

.card {
  @include apply(translate-y(100%) hover);
}

Compiled CSS

.card:hover {
  --wu-translate-y: 100%;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: translate, apply-transform. Source: utilities/_transforms.scss:169

translate-z mixin

Moves the element along the z axis by setting --wu-translate-z and writing the combined transform.

A unitless number that is not a spacing key raises an error, as do percentages and fraction keys (50%, 50p): the z axis takes a length.

@mixin translate-z($value)

Parameter	Type	Default	Description
$value	Number|Length|String	Required	A $spacings key, a negated key, a length, calc() or var()

Example

.layer {
  @include translate-z(10px);
}

Compiled CSS

.layer {
  --wu-translate-z: 10px;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: translate, apply-transform. Source: utilities/_transforms.scss:184

translate mixin

Moves the element on the x axis, and on the y axis when $y is given, then writes the combined transform.

A single argument moves the x axis only.

@mixin translate($x, $y: null)

Parameter	Type	Default	Description
$x	Number|Length|String	Required	A $spacings key (4 gives var(--wu-space-4)), a negated key (-4 gives calc(-1 * token)), a fraction key (25p, -25p), a length, percentage, calc() or var()
$y	Number|Length|String|Null	null	Same values as $x; when null, --wu-translate-y is left unchanged

Example

.tooltip {
  @include translate(-50p, 2);
}

Compiled CSS

.tooltip {
  --wu-translate-x: -50%;
  --wu-translate-y: var(--wu-space-2);
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: translate-x, translate-y. Source: utilities/_transforms.scss:205

scale-x mixin

Scales the element horizontally by setting --wu-scale-x and writing the combined transform.

Keys win over factors, so scale(100) is 1 and scale(50) is 0.5.

@mixin scale-x($value)

Parameter	Type	Default	Description
$value	Number|Percentage|String	Required	A $scale-values key (0, 50, 75, 90, 95, 100, 105, 110, 125, 150; 150 gives 1.5) a factor such as 1.5, a percentage, calc() or var(); any other word raises an error

Example

.thumb {
  @include scale-x(110);
}

Compiled CSS

.thumb {
  --wu-scale-x: 1.1;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: apply-transform. Source: utilities/_transforms.scss:275

scale-y mixin

Scales the element vertically by setting --wu-scale-y and writing the combined transform.

Keys win over factors, so scale(100) is 1 and scale(50) is 0.5.

@mixin scale-y($value)

Parameter	Type	Default	Description
$value	Number|Percentage|String	Required	A $scale-values key (0, 50, 75, 90, 95, 100, 105, 110, 125, 150; 150 gives 1.5) a factor such as 1.5, a percentage, calc() or var(); any other word raises an error

Example

.thumb {
  @include scale-y(1.5);
}

Compiled CSS

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

See also: apply-transform. Source: utilities/_transforms.scss:289

scale mixin

Scales the element on both axes by setting --wu-scale-x and --wu-scale-y and writing the combined transform.

Keys win over factors, so scale(100) is 1 and scale(50) is 0.5.

@mixin scale($value)

Parameter	Type	Default	Description
$value	Number|Percentage|String	Required	A $scale-values key (0, 50, 75, 90, 95, 100, 105, 110, 125, 150; 150 gives 1.5) a factor such as 1.5, a percentage, calc() or var(); any other word raises an error

Example 1

.thumb {
  @include scale(105);
}

Compiled CSS

.thumb {
  --wu-scale-x: 1.05;
  --wu-scale-y: 1.05;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

Example 2

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

Compiled CSS

.card {
  --wu-transition-transform: transform;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
}
.card:hover {
  --wu-scale-x: 1.05;
  --wu-scale-y: 1.05;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: apply-transform. Source: utilities/_transforms.scss:307

rotate mixin

Rotates the element by setting --wu-rotate and writing the combined transform.

0 is written 0deg. Another unitless number, such as 30, and any other word raise an error.

@mixin rotate($value)

Parameter	Type	Default	Description
$value	Number|String	Required	A $rotation-values key (0, 45, 90, 180, 270; 45 gives 45deg as in .rotate-45), a negated key (-45), an angle with a unit (30deg, 0.25turn), calc() or var()

Example

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

Compiled CSS

.chevron:hover {
  --wu-rotate: 180deg;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: apply-transform. Source: utilities/_transforms.scss:324

skew-x mixin

Skews the element along the x axis by setting --wu-skew-x and writing the combined transform.

A unitless non-zero number or any other word raises an error.

@mixin skew-x($value)

Parameter	Type	Default	Description
$value	Number|String	Required	An angle with a unit (6deg), calc(), var() or 0 (written 0deg)

Example

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

Compiled CSS

.ribbon {
  --wu-skew-x: 6deg;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: apply-transform. Source: utilities/_transforms.scss:338

skew-y mixin

Skews the element along the y axis by setting --wu-skew-y and writing the combined transform.

A unitless non-zero number or any other word raises an error.

@mixin skew-y($value)

Parameter	Type	Default	Description
$value	Number|String	Required	An angle with a unit (6deg), calc(), var() or 0 (written 0deg)

Example

.ribbon {
  @include skew-y(-3deg);
}

Compiled CSS

.ribbon {
  --wu-skew-y: -3deg;
  transform: translateX(var(--wu-translate-x)) translateY(var(--wu-translate-y)) translateZ(var(--wu-translate-z)) rotate(var(--wu-rotate)) skewX(var(--wu-skew-x)) skewY(var(--wu-skew-y)) scaleX(var(--wu-scale-x)) scaleY(var(--wu-scale-y));
}

See also: apply-transform. Source: utilities/_transforms.scss:352

origin mixin

Sets transform-origin from an $origin-values key (top-left gives top left, matching .origin-top-left) or a transform-origin value.

@mixin origin($value)

Parameter	Type	Default	Description
$value	String|Length|List	Required	An $origin-values key (center, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left) or a transform-origin value of position keywords, lengths, percentages, calc() or var(), such as top left or 50% 100%; anything else raises an error

Example 1

.menu {
  @include origin(top-left); // transform-origin: top left
}

Compiled CSS

.menu {
  transform-origin: top left;
}

Example 2

.badge {
  @include origin(50% 100%);
}

Compiled CSS

.badge {
  transform-origin: 50% 100%;
}

transform-origin on MDN

See also: rotate, scale. Source: utilities/_transforms.scss:370