Transforms

Bamboo provides utilities for transforming elements.

Scale

Control the scale property. Supported value is auto

<div className={css({ scale: 'auto' })} /> // => 'var(--scale-x) var(--scale-y)'

Scale X

Control the scaleX property.

<div className={css({ scaleX: '1.3' })} /> // => --scale-x: 1.3;

Scale Y

Control the scaleY property.

<div className={css({ scaleY: '0.4' })} /> // => --scale-y: 0.4;

Translate

Control the translate property. Supported values are auto and auto-3d.

<div className={css({ translate: 'auto' })} /> // => 'var(--translate-x) var(--translate-y)'

Translate X

Control the translateX property.

<div className={css({ translateX: '50%' })} /> // => --translate-x: 50%;
<div className={css({ x: '20px' })} /> // shorthand

Translate Y

Control the translateY property.

<div className={css({ translateY: '-40%' })} /> // => --translate-y: -40%;
<div className={css({ y: '4rem' })} /> // shorthand

Translate Z

Control the translateZ property, with translate: 'auto-3d'. It takes a spacing token or a length.

<div className={css({ translate: 'auto-3d', translateZ: '4' })} /> // => --translate-z: var(--spacing-4);
<div className={css({ z: '10px' })} /> // shorthand

Unlike the other two axes, it takes no fraction. A fraction is a percentage, which translate cannot take in z — there is no size in z for it to be a percentage of — so one would invalidate the whole declaration, and drop x and y with it.

Rotate

A single value is a rotation of the rotate property.

<div className={css({ rotate: '45deg' })} /> // => rotate: 45deg;

auto composes a rotation about each axis on transform instead, since the rotate property holds one rotation about one axis. An axis left unset adds nothing, and auto-3d is the same as auto.

<div className={css({ rotate: 'auto', rotateX: '45deg', rotateY: '30deg' })} />
// => transform: var(--rotate-x, ) var(--rotate-y, ) var(--rotate-z, );
//    --rotate-x: rotateX(45deg);
//    --rotate-y: rotateY(30deg);

It writes transform, so a transform of your own on the same element competes with it, and only one of the two applies; write the functions together in one instead, transform: 'skewX(10deg) rotateX(45deg)'. With a non-uniform scale, the rotation applies after the scaling rather than before it.

auto clears the rotate property, so under a condition it replaces an angle set beneath it. The other way round, an angle under a condition leaves the axes set beneath it in place — set the axes for that condition instead, as _hover: { rotateY: '180deg' }.