This is the Standard reference for transforms.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
transform
Interactive example.
Prefixes: transform. Example: transform:none. It emits transform:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
none, [translateX(6px)_rotate(12deg)_scale(1.1)], $transform
transform-origin
Interactive example.
Prefixes: transform-origin. Example: transform-origin:top. It emits transform-origin:top;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right, [20%_30%], $origin
transform-box
Interactive example.
Prefixes: transform-box. Example: transform-box:border-box. It emits transform-box:border-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
border-box, content-box, fill-box, stroke-box, view-box, [fill-box], $transformBox
transform-style
Interactive example.
Prefixes: transform-style. Example: transform-style:flat. It emits transform-style:flat;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
flat, preserve-3d, [preserve-3d], $transformStyle
translate
Interactive example. Rule type: mixed.
Prefixes: translate. Example: translate:none. It emits translate:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
none, none, 1, 1/2, [8px_4px], [8px_4px_2px], $translate
translate-x
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: translate-x. Example: translate-x:1. It emits --T-translate-x:calc(var(--spacing) * 1);translate:var(--T-translate-x, 0) var(--T-translate-y, 0) var(--T-translate-z, 0);.
Documented values (8)
1, 2, 4, 8, 1/2, 100%, [12px], $translateX
translate-y
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: translate-y. Example: translate-y:1. It emits --T-translate-y:calc(var(--spacing) * 1);translate:var(--T-translate-x, 0) var(--T-translate-y, 0) var(--T-translate-z, 0);.
Documented values (8)
1, 2, 4, 8, 1/2, 100%, [12px], $translateY
translate-z
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: translate-z. Example: translate-z:1. It emits --T-translate-z:calc(var(--spacing) * 1);translate:var(--T-translate-x, 0) var(--T-translate-y, 0) var(--T-translate-z, 0);.
Documented values (7)
1, 2, 4, 8, [12px], [-12px], $translateZ
scale
Interactive example. Rule type: mixed.
Prefixes: scale. Example: scale:none. It emits scale:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
none, 50, 100, 150, [1.25], [1.25_0.75], [1.25_0.75_1], $scale
scale-x
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: scale-x. Example: scale-x:50. It emits --T-scale-x:50%;scale:var(--T-scale-x, 1) var(--T-scale-y, 1) var(--T-scale-z, 1);.
Documented values (8)
50, 75, 90, 100, 110, 125, [1.25], $scaleX
scale-y
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: scale-y. Example: scale-y:50. It emits --T-scale-y:50%;scale:var(--T-scale-x, 1) var(--T-scale-y, 1) var(--T-scale-z, 1);.
Documented values (8)
50, 75, 90, 100, 110, 125, [1.25], $scaleY
scale-z
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: scale-z. Example: scale-z:50. It emits --T-scale-z:50%;scale:var(--T-scale-x, 1) var(--T-scale-y, 1) var(--T-scale-z, 1);.
Documented values (8)
50, 75, 90, 100, 110, 125, [1.25], $scaleZ
rotate
Interactive example.
Prefixes: rotate. Example: rotate:none. It emits rotate:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (15)
none, 0, 45, 90, 180, 270, 360, -45, -90, -180, -270, -360,
[x_45deg], [1_0_0_45deg], $rotate
rotate-x
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: rotate-x. Example: rotate-x:45. It emits --T-rotate-x:rotateX(45deg);transform:var(--T-rotate-x,) var(--T-rotate-y,) var(--T-rotate-z,) var(--T-skew,) var(--T-skew-x,) var(--T-skew-y,);.
Documented values (6)
45, 90, 180, 270, [0.5turn], $rotateX
rotate-y
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: rotate-y. Example: rotate-y:45. It emits --T-rotate-y:rotateY(45deg);transform:var(--T-rotate-x,) var(--T-rotate-y,) var(--T-rotate-z,) var(--T-skew,) var(--T-skew-x,) var(--T-skew-y,);.
Documented values (6)
45, 90, 180, 270, [0.5turn], $rotateY
rotate-z
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: rotate-z. Example: rotate-z:45. It emits --T-rotate-z:rotateZ(45deg);transform:var(--T-rotate-x,) var(--T-rotate-y,) var(--T-rotate-z,) var(--T-skew,) var(--T-skew-x,) var(--T-skew-y,);.
Documented values (6)
45, 90, 180, 270, [0.5turn], $rotateZ
skew
Interactive example. Rule type: composer.
Prefixes: skew. Example: skew:3. It emits --T-skew:skew(3deg);transform:var(--T-rotate-x,) var(--T-rotate-y,) var(--T-rotate-z,) var(--T-skew,) var(--T-skew-x,) var(--T-skew-y,);.
Documented values (6)
3, 6, 12, 45, [12deg_6deg], $skew
skew-x
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: skew-x. Example: skew-x:3. It emits --T-skew-x:skewX(3deg);transform:var(--T-rotate-x,) var(--T-rotate-y,) var(--T-rotate-z,) var(--T-skew,) var(--T-skew-x,) var(--T-skew-y,);.
Documented values (6)
3, 6, 12, 45, [0.5turn], $skewX
skew-y
Interactive example. Maturity: advanced. Rule type: composer.
Prefixes: skew-y. Example: skew-y:3. It emits --T-skew-y:skewY(3deg);transform:var(--T-rotate-x,) var(--T-rotate-y,) var(--T-rotate-z,) var(--T-skew,) var(--T-skew-x,) var(--T-skew-y,);.
Documented values (6)
3, 6, 12, 45, [0.5turn], $skewY
perspective
Interactive example.
Prefixes: perspective. Example: perspective:none. It emits perspective:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
none, 0, 800, 1.5, 2rem, [800px], [calc(100px_+_1rem)], $perspective
perspective-origin
Interactive example.
Prefixes: perspective-origin. Example: perspective-origin:top. It emits perspective-origin:top;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right, [20%_30%], $perspectiveOrigin
backface-visibility
Interactive example.
Prefixes: backface-vis. Example: backface-vis:visible. It emits backface-visibility:visible;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
visible, hidden, [visible], $backfaceVisibility
zoom
Interactive example.
Prefixes: zoom. Example: zoom:0.5. It emits zoom:0.5;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
0.5, 1, 1.5, 2, 50%, 100%, 150%, 200%, [calc(1_+_0.25)], $zoom