Transforms

Rotate

Utilities for rotates an element that has transform applied.

Class

class	css
rotate-0	--transform-rotate: 0
rotate-45	--transform-rotate: 45deg
rotate-90	--transform-rotate: 90deg
rotate-180	--transform-rotate: 180deg
-rotate-180	--transform-rotate: -180deg
-rotate-90	--transform-rotate: -90deg
-rotate-45	--transform-rotate: -45deg

Usage

Set basic Transform Origin with Rotate utility. (See Skew, Scale).

Set the element rotation to 0 degree.

<!-- Example -->
<img class="transform rotate-0 ... h-32 w-24"
     src="...">

<y class="transform rotate-0 ... h-32 w-24"
   style="background-image:utl(...)">

Set the element rotation to 45 degree.

<!-- Example -->
<img class="transform rotate-45 ... h-32 w-24"
     src="...">

<y class="transform rotate-45 ... h-32 w-24"
   style="background-image:utl(...)">

Set the element rotation to 90 degree.

<!-- Example -->
<img class="transform rotate-90 ... h-32 w-24"
     src="...">

<y class="transform rotate-90 ... h-32 w-24"
   style="background-image:utl(...)">

Set the element rotation to 180 degree.

<!-- Example -->
<img class="transform rotate-180 ... h-32 w-24"
     src="...">

<y class="transform rotate-180 ... h-32 w-24"
   style="background-image:utl(...)">

Set the element rotation to -180 degree.

<!-- Example -->
<img class="transform -rotate-180 ... h-32 w-24"
     src="...">

<y class="transform -rotate-180 ... h-32 w-24"
   style="background-image:utl(...)">

Set the element rotation to -90 degree.

<!-- Example -->
<img class="transform -rotate-90 ... h-32 w-24"
     src="...">

<y class="transform -rotate-90 ... h-32 w-24"
   style="background-image:utl(...)">

Set the element rotation to -45 degree.

<!-- Example -->
<img class="transform -rotate-45 ... h-32 w-24"
     src="...">

<y class="transform -rotate-45 ... h-32 w-24"
   style="background-image:utl(...)">

Variant

Variant	Enabled	Responsive
Default	Yes
Dark Theme
hover	Yes
group-hover
focus
focus-within
active
visited
checked
disabled