Utilities for skewing elements with transform.

React propsCSS Properties
skewX={angle}--x-skew-x: {angle};
skewY={angle}--x-skew-y: {angle};


Skew an element by first enabling transforms with the transform utility, then specifying the skew angle using the skewX={angle} and skewY={angle} utility.

<x.img transform skewY={0} /> <x.img transform skewY={3} /> <x.img transform skewY={6} /> <x.img transform skewY={12} />


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

<x.div transform skewX={{ md: 3 }} />

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

Edit this page on GitHub