This is the Standard reference for transforms.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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