Press
/
to search

Transforms

Rotate Transform

Utilities for rotates an element that has transform applied.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
rotate-0--transform-rotate: 0deg
rotate-3--transform-rotate: 3deg
rotate-6--transform-rotate: 6deg
rotate-9--transform-rotate: 9deg
rotate-12--transform-rotate: 12deg
rotate-15--transform-rotate: 15deg
rotate-18--transform-rotate: 18deg
rotate-21--transform-rotate: 21deg
rotate-24--transform-rotate: 24deg
rotate-27--transform-rotate: 27deg
rotate-30--transform-rotate: 30deg
rotate-33--transform-rotate: 33deg
rotate-36--transform-rotate: 36deg
rotate-39--transform-rotate: 39deg
rotate-42--transform-rotate: 42deg
rotate-45--transform-rotate: 45deg
rotate-48--transform-rotate: 48deg
rotate-51--transform-rotate: 51deg
rotate-54--transform-rotate: 54deg
rotate-57--transform-rotate: 57deg
rotate-60--transform-rotate: 60deg
rotate-63--transform-rotate: 63deg
rotate-66--transform-rotate: 66deg
rotate-69--transform-rotate: 69deg
rotate-72--transform-rotate: 72deg
rotate-75--transform-rotate: 75deg
rotate-78--transform-rotate: 78deg
rotate-81--transform-rotate: 81deg
rotate-84--transform-rotate: 84deg
rotate-87--transform-rotate: 87deg
rotate-90--transform-rotate: 90deg
rotate-100--transform-rotate: 100deg
rotate-120--transform-rotate: 120deg
rotate-180--transform-rotate: 180deg
-rotate-3--transform-rotate: -3deg
-rotate-6--transform-rotate: -6deg
-rotate-9--transform-rotate: -9deg
-rotate-12--transform-rotate: -12deg
-rotate-15--transform-rotate: -15deg
-rotate-18--transform-rotate: -18deg
-rotate-21--transform-rotate: -21deg
-rotate-24--transform-rotate: -24deg
-rotate-27--transform-rotate: -27deg
-rotate-30--transform-rotate: -30deg
-rotate-33--transform-rotate: -33deg
-rotate-36--transform-rotate: -36deg
-rotate-39--transform-rotate: -39deg
-rotate-42--transform-rotate: -42deg
-rotate-45--transform-rotate: -45deg
-rotate-48--transform-rotate: -48deg
-rotate-51--transform-rotate: -51deg
-rotate-54--transform-rotate: -54deg
-rotate-57--transform-rotate: -57deg
-rotate-60--transform-rotate: -60deg
-rotate-63--transform-rotate: -63deg
-rotate-66--transform-rotate: -66deg
-rotate-69--transform-rotate: -69deg
-rotate-72--transform-rotate: -72deg
-rotate-75--transform-rotate: -75deg
-rotate-78--transform-rotate: -78deg
-rotate-81--transform-rotate: -81deg
-rotate-84--transform-rotate: -84deg
-rotate-87--transform-rotate: -87deg
-rotate-90--transform-rotate: -90deg
-rotate-100--transform-rotate: -100deg
-rotate-120--transform-rotate: -120deg
-rotate-180--transform-rotate: -180deg
classcss
rotate-x-0--transform-rotate-x: 0deg
rotate-x-3--transform-rotate-x: 3deg
rotate-x-6--transform-rotate-x: 6deg
rotate-x-9--transform-rotate-x: 9deg
rotate-x-12--transform-rotate-x: 12deg
rotate-x-15--transform-rotate-x: 15deg
rotate-x-18--transform-rotate-x: 18deg
rotate-x-21--transform-rotate-x: 21deg
rotate-x-24--transform-rotate-x: 24deg
rotate-x-27--transform-rotate-x: 27deg
rotate-x-30--transform-rotate-x: 30deg
rotate-x-33--transform-rotate-x: 33deg
rotate-x-36--transform-rotate-x: 36deg
rotate-x-39--transform-rotate-x: 39deg
rotate-x-42--transform-rotate-x: 42deg
rotate-x-45--transform-rotate-x: 45deg
rotate-x-48--transform-rotate-x: 48deg
rotate-x-51--transform-rotate-x: 51deg
rotate-x-54--transform-rotate-x: 54deg
rotate-x-57--transform-rotate-x: 57deg
rotate-x-60--transform-rotate-x: 60deg
rotate-x-63--transform-rotate-x: 63deg
rotate-x-66--transform-rotate-x: 66deg
rotate-x-69--transform-rotate-x: 69deg
rotate-x-72--transform-rotate-x: 72deg
rotate-x-75--transform-rotate-x: 75deg
rotate-x-78--transform-rotate-x: 78deg
rotate-x-81--transform-rotate-x: 81deg
rotate-x-84--transform-rotate-x: 84deg
rotate-x-87--transform-rotate-x: 87deg
rotate-x-90--transform-rotate-x: 90deg
rotate-x-100--transform-rotate-x: 100deg
rotate-x-120--transform-rotate-x: 120deg
rotate-x-180--transform-rotate-x: 180deg
-rotate-x-3--transform-rotate-x: -3deg
-rotate-x-6--transform-rotate-x: -6deg
-rotate-x-9--transform-rotate-x: -9deg
-rotate-x-12--transform-rotate-x: -12deg
-rotate-x-15--transform-rotate-x: -15deg
-rotate-x-18--transform-rotate-x: -18deg
-rotate-x-21--transform-rotate-x: -21deg
-rotate-x-24--transform-rotate-x: -24deg
-rotate-x-27--transform-rotate-x: -27deg
-rotate-x-30--transform-rotate-x: -30deg
-rotate-x-33--transform-rotate-x: -33deg
-rotate-x-36--transform-rotate-x: -36deg
-rotate-x-39--transform-rotate-x: -39deg
-rotate-x-42--transform-rotate-x: -42deg
-rotate-x-45--transform-rotate-x: -45deg
-rotate-x-48--transform-rotate-x: -48deg
-rotate-x-51--transform-rotate-x: -51deg
-rotate-x-54--transform-rotate-x: -54deg
-rotate-x-57--transform-rotate-x: -57deg
-rotate-x-60--transform-rotate-x: -60deg
-rotate-x-63--transform-rotate-x: -63deg
-rotate-x-66--transform-rotate-x: -66deg
-rotate-x-69--transform-rotate-x: -69deg
-rotate-x-72--transform-rotate-x: -72deg
-rotate-x-75--transform-rotate-x: -75deg
-rotate-x-78--transform-rotate-x: -78deg
-rotate-x-81--transform-rotate-x: -81deg
-rotate-x-84--transform-rotate-x: -84deg
-rotate-x-87--transform-rotate-x: -87deg
-rotate-x-90--transform-rotate-x: -90deg
-rotate-x-100--transform-rotate-x: -100deg
-rotate-x-120--transform-rotate-x: -120deg
-rotate-x-180--transform-rotate-x: -180deg
classcss
rotate-y-0--transform-rotate-y: 0deg
rotate-y-3--transform-rotate-y: 3deg
rotate-y-6--transform-rotate-y: 6deg
rotate-y-9--transform-rotate-y: 9deg
rotate-y-12--transform-rotate-y: 12deg
rotate-y-15--transform-rotate-y: 15deg
rotate-y-18--transform-rotate-y: 18deg
rotate-y-21--transform-rotate-y: 21deg
rotate-y-24--transform-rotate-y: 24deg
rotate-y-27--transform-rotate-y: 27deg
rotate-y-30--transform-rotate-y: 30deg
rotate-y-33--transform-rotate-y: 33deg
rotate-y-36--transform-rotate-y: 36deg
rotate-y-39--transform-rotate-y: 39deg
rotate-y-42--transform-rotate-y: 42deg
rotate-y-45--transform-rotate-y: 45deg
rotate-y-48--transform-rotate-y: 48deg
rotate-y-51--transform-rotate-y: 51deg
rotate-y-54--transform-rotate-y: 54deg
rotate-y-57--transform-rotate-y: 57deg
rotate-y-60--transform-rotate-y: 60deg
rotate-y-63--transform-rotate-y: 63deg
rotate-y-66--transform-rotate-y: 66deg
rotate-y-69--transform-rotate-y: 69deg
rotate-y-72--transform-rotate-y: 72deg
rotate-y-75--transform-rotate-y: 75deg
rotate-y-78--transform-rotate-y: 78deg
rotate-y-81--transform-rotate-y: 81deg
rotate-y-84--transform-rotate-y: 84deg
rotate-y-87--transform-rotate-y: 87deg
rotate-y-90--transform-rotate-y: 90deg
rotate-y-100--transform-rotate-y: 100deg
rotate-y-120--transform-rotate-y: 120deg
rotate-y-180--transform-rotate-y: 180deg
-rotate-y-3--transform-rotate-y: -3deg
-rotate-y-6--transform-rotate-y: -6deg
-rotate-y-9--transform-rotate-y: -9deg
-rotate-y-12--transform-rotate-y: -12deg
-rotate-y-15--transform-rotate-y: -15deg
-rotate-y-18--transform-rotate-y: -18deg
-rotate-y-21--transform-rotate-y: -21deg
-rotate-y-24--transform-rotate-y: -24deg
-rotate-y-27--transform-rotate-y: -27deg
-rotate-y-30--transform-rotate-y: -30deg
-rotate-y-33--transform-rotate-y: -33deg
-rotate-y-36--transform-rotate-y: -36deg
-rotate-y-39--transform-rotate-y: -39deg
-rotate-y-42--transform-rotate-y: -42deg
-rotate-y-45--transform-rotate-y: -45deg
-rotate-y-48--transform-rotate-y: -48deg
-rotate-y-51--transform-rotate-y: -51deg
-rotate-y-54--transform-rotate-y: -54deg
-rotate-y-57--transform-rotate-y: -57deg
-rotate-y-60--transform-rotate-y: -60deg
-rotate-y-63--transform-rotate-y: -63deg
-rotate-y-66--transform-rotate-y: -66deg
-rotate-y-69--transform-rotate-y: -69deg
-rotate-y-72--transform-rotate-y: -72deg
-rotate-y-75--transform-rotate-y: -75deg
-rotate-y-78--transform-rotate-y: -78deg
-rotate-y-81--transform-rotate-y: -81deg
-rotate-y-84--transform-rotate-y: -84deg
-rotate-y-87--transform-rotate-y: -87deg
-rotate-y-90--transform-rotate-y: -90deg
-rotate-y-100--transform-rotate-y: -100deg
-rotate-y-120--transform-rotate-y: -120deg
-rotate-y-180--transform-rotate-y: -180deg
classcss
rotate-z-0--transform-rotate-z: 0deg
rotate-z-3--transform-rotate-z: 3deg
rotate-z-6--transform-rotate-z: 6deg
rotate-z-9--transform-rotate-z: 9deg
rotate-z-12--transform-rotate-z: 12deg
rotate-z-15--transform-rotate-z: 15deg
rotate-z-18--transform-rotate-z: 18deg
rotate-z-21--transform-rotate-z: 21deg
rotate-z-24--transform-rotate-z: 24deg
rotate-z-27--transform-rotate-z: 27deg
rotate-z-3--transform-rotate-z: 30deg
rotate-z-33--transform-rotate-z: 33deg
rotate-z-36--transform-rotate-z: 36deg
rotate-z-39--transform-rotate-z: 39deg
rotate-z-42--transform-rotate-z: 42deg
rotate-z-45--transform-rotate-z: 45deg
rotate-z-48--transform-rotate-z: 48deg
rotate-z-51--transform-rotate-z: 51deg
rotate-z-54--transform-rotate-z: 54deg
rotate-z-57--transform-rotate-z: 57deg
rotate-z-60--transform-rotate-z: 60deg
rotate-z-63--transform-rotate-z: 63deg
rotate-z-66--transform-rotate-z: 66deg
rotate-z-69--transform-rotate-z: 69deg
rotate-z-72--transform-rotate-z: 72deg
rotate-z-75--transform-rotate-z: 75deg
rotate-z-78--transform-rotate-z: 78deg
rotate-z-81--transform-rotate-z: 81deg
rotate-z-84--transform-rotate-z: 84deg
rotate-z-87--transform-rotate-z: 87deg
rotate-z-90--transform-rotate-z: 90deg
rotate-z-10--transform-rotate-z: 100deg
rotate-z-120--transform-rotate-z: 120deg
rotate-z-180--transform-rotate-z: 180deg
-rotate-z-3--transform-rotate-z: -3deg
-rotate-z-6--transform-rotate-z: -6deg
-rotate-z-9--transform-rotate-z: -9deg
-rotate-z-12--transform-rotate-z: -12deg
-rotate-z-15--transform-rotate-z: -15deg
-rotate-z-18--transform-rotate-z: -18deg
-rotate-z-21--transform-rotate-z: -21deg
-rotate-z-24--transform-rotate-z: -24deg
-rotate-z-27--transform-rotate-z: -27deg
-rotate-z-3--transform-rotate-z: -30deg
-rotate-z-33--transform-rotate-z: -33deg
-rotate-z-36--transform-rotate-z: -36deg
-rotate-z-39--transform-rotate-z: -39deg
-rotate-z-42--transform-rotate-z: -42deg
-rotate-z-45--transform-rotate-z: -45deg
-rotate-z-48--transform-rotate-z: -48deg
-rotate-z-51--transform-rotate-z: -51deg
-rotate-z-54--transform-rotate-z: -54deg
-rotate-z-57--transform-rotate-z: -57deg
-rotate-z-60--transform-rotate-z: -60deg
-rotate-z-63--transform-rotate-z: -63deg
-rotate-z-66--transform-rotate-z: -66deg
-rotate-z-69--transform-rotate-z: -69deg
-rotate-z-72--transform-rotate-z: -72deg
-rotate-z-75--transform-rotate-z: -75deg
-rotate-z-78--transform-rotate-z: -78deg
-rotate-z-81--transform-rotate-z: -81deg
-rotate-z-84--transform-rotate-z: -84deg
-rotate-z-87--transform-rotate-z: -87deg
-rotate-z-90--transform-rotate-z: -90deg
-rotate-z-10--transform-rotate-z: -100deg
-rotate-z-120--transform-rotate-z: -120deg
-rotate-z-180--transform-rotate-z: -180deg

Usage

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

Set the element rotation to 0 degree.

<img class="transform rotate-0 ... height-32 width-24" src="...">

<div class="transform rotate-0 ... height-32 width-24" style="background-image:utl(...)"></div>
HTML
img {
  @extend
    .transform,
    .rotate-0,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .rotate-0,
    .height-32,
    .width-24;
}
SCSS

Set the element rotation to 45 degree.

<img class="transform rotate-45 ... height-32 width-24" src="...">

<div class="transform rotate-45 ... height-32 width-24" style="background-image:url(...)">
</div>
HTML
img {
  @extend
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}
SCSS

Set the element rotation to 90 degree.

<img class="transform rotate-90 ... height-32 width-24" src="...">

<div class="transform rotate-90 ... height-32 width-24" style="background-image:url(...)">
</div>
HTML
img {
@extend
  .transform,
  .rotate-90,
  .height-32,
  .width-24;
}
.dummy {
  @extend
    .transform,
    .rotate-90,
    .height-32,
    .width-24;
}
SCSS

Set the element rotation to 180 degree.

<img class="transform rotate-180 ... height-32 width-24" src="...">

<div class="transform rotate-180 ... height-32 width-24" style="background-image:url(...)">
</div>
HTML
img {
  @extend
    .transform,
    .rotate-180,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .rotate-180,
    .height-32,
    .width-24;
}
SCSS

Set the element rotation to -180 degree.

<img class="transform -rotate-180 ... height-32 width-24" src="...">

<div class="transform -rotate-180 ... height-32 width-24" style="background-image:url(...)">
</div>
HTML
img {
  @extend
    .transform,
    .-rotate-180,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .-rotate-180,
    .height-32,
    .width-24;
}
SCSS

Set the element rotation to -90 degree.

<img class="transform -rotate-90 ... height-32 width-24" src="...">

<div class="transform -rotate-90 ... height-32 width-24" style="background-image:url(...)">
</div>
HTML
img {
  @extend
    .transform,
    .-rotate-90,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .-rotate-90,
    .height-32,
    .width-24;
}
SCSS

Set the element rotation to -45 degree.

<img class="transform -rotate-45 ... height-32 width-24" src="...">

<div class="transform -rotate-45 ... height-32 width-24" style="background-image:url(...)">
</div>
HTML
img {
  @extend
    .transform,
    .-rotate-45,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .-rotate-45,
    .height-32,
    .width-24;
}
SCSS

Set the element rotation with 3D perspective using rotate-x, rotate-y and rotate-z, apply hover to create animated effect.

<div class="transform-perspective-1000">
  <img class="transform rotate-x-18 (hover)rotate-x-0 -rotate-y-18 (hover)rotate-y-0 rotate-z-3 (hover)rotate-z-0 ... height-32 width-24 ... transition duration-500 ease-in-out" src="...">
</div>
<div class="transform-perspective-1000">
  <div class="transform rotate-x-18 (hover)rotate-x-0 -rotate-y-18 (hover)rotate-y-0 rotate-z-3 (hover)rotate-z-0 ... height-32 width-24 ... transition duration-500 ease-in-out" style="background-image:url(...)">
  </div>
</div>
HTML
.dummy-parent {
  @extend
    .transform-perspective-1000;
}
.dummy-image {
  @extend
    .transform,
    .rotate-x-18,
    .(hover)rotate-x-0,
    .-rotate-y-18,
    .(hover)rotate-y-0,
    .rotate-z-3,
    .(hover)rotate-z-0,
    .height-32,
    .width-24,
    .transition,
    .duration-500,
    .ease-in-out;
}
SCSS