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 |