Utilities for rotating elements with transform

Class reference

rotate-0;--transform-rotate: 0
rotate-1;--transform-rotate: 1deg
rotate-2;--transform-rotate: 2deg
rotate-3;--transform-rotate: 3deg
rotate-6;--transform-rotate: 6deg
rotate-12;--transform-rotate: 12deg
rotate-45;--transform-rotate: 45deg
rotate-90;--transform-rotate: 90deg
rotate-135;--transform-rotate: 135deg
rotate-180;--transform-rotate: 180deg
rotate-270;--transform-rotate: 270deg
-rotate-180--transform-rotate: -180deg
-rotate-90--transform-rotate: -90deg
-rotate-45--transform-rotate: -45deg
-rotate-12--transform-rotate: -12deg
-rotate-6--transform-rotate: -6deg
-rotate-3--transform-rotate: -3deg
-rotate-2--transform-rotate: -2deg
-rotate-1--transform-rotate: -1deg


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.


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.