Rotate

Utilities for rotating elements with transform.

Usage

Rotate an element by first enabling transforms with the transform utility, then specifying the rotation angle using the rotate={angle} utility.

<x.img transform rotate={0} />
<x.img transform rotate={45} />
<x.img transform rotate="0.5turn" />
<x.img transform rotate={120} />

Responsive

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

<x.div transform rotate={{ md: 90 }} />

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