Utilities for scaling elements with transform.

React propsCSS Properties
scale={ratio}--x-scale-x: {ratio};
--x-scale-y: {ratio};
scaleX={ratio}--x-scale-x: {ratio};
scaleY={ratio}--x-scale-y: {ratio};


Control the scale of an element by first enabling transforms with the transform utility, then specifying the scale using the scale={ratio}, scaleX={ratio}, and scaleY={ratio} utilities.

<x.img transform scale={0.75} /> <x.img transform scale={1} /> <x.img transform scale={1.25} /> <x.img transform scale={1.5} />


To control the scale of an element at a specific breakpoint, use responsive object notation. For example, adding the property scale={{ md: 0.5 }} to an element would apply the scale={0.5} utility at medium screen sizes and above.

<x.div transform scale={{ md: 0.5 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub