Transforms

Scale

Use the scale prop to control the scale of an element.

<Box scale="1.2" />

When the scale prop is set to auto, the scaleX and scaleY props are used to control the scale of the element.

Scale X

Use the scaleX prop to control the scaleX property of an element. This requires the scale prop to be set to auto.

<Box scale="auto" scaleX="1.3" />

Scale Y

Use the scaleY prop to control the scaleY property of an element. This requires the scale prop to be set to auto.

<Box scale="auto" scaleY="0.4" />

Rotate

Use the rotate prop to control the rotate property of an element.

<Box rotate="45deg" />

When the rotate prop is set to auto, the rotateX and rotateY props are used to control the rotate of the element.

Rotate X

Use the rotateX prop to control the rotateX property of an element.

<Box rotateX="45deg" />

Rotate Y

Use the rotateY prop to control the rotateY property of an element.

<Box rotateY="45deg" />

Translate

Use the translate prop to control the translate property of an element.

<Box translate="40px" />
<Box translate="50% -40%" />

When the translate prop is set to auto, the translateX and translateY props are used to control the translate of the element.

Translate X

Use the translateX prop to control the translateX property of an element. This requires the translate prop to be set to auto.

// hardcoded values
<Box translate="auto" translateX="50%" />
<Box translate="auto" translateX="20px" />

// token values
<Box translate="auto" translateX="4" />
<Box translate="auto" translateX="-10" />

Translate Y

Use the translateY prop to control the translateY property of an element. This requires the translate prop to be set to auto.

// hardcoded values
<Box translate="auto" translateY="-40%" />
<Box translate="auto" translateY="4rem" />

// token values
<Box translate="auto" translateY="4" />
<Box translate="auto" translateY="-10" />