Rotate

Class reference

# Usage

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

<img class="transform rotate-0 ...">
<img class="transform rotate-45 ...">
<img class="transform rotate-90 ...">
<img class="transform rotate-180 ...">

Note that because Elements implements transforms using CSS custom properties, the transform utilities are not supported in older browsers like IE11.

# Responsive

To control the rotation of an element at a specific breakpoint, add a {screen}: prefix to any existing rotate utility. For example, use md:rotate-90 to apply the rotate-90 utility at only medium screen sizes and above.

<div class="transform rotate-45 **md:rotate-90**"></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.