Rotate

Utility	Properties
t-r-0	transform: rotate(0);
t-r-5	transform: rotate(5deg);
t-r-10	transform: rotate(10deg);
t-r-15	transform: rotate(15deg);
t-r-20	transform: rotate(20deg);
t-r-25	transform: rotate(25deg);
t-r-30	transform: rotate(30deg);
t-r-35	transform: rotate(35deg);
t-r-40	transform: rotate(40deg);
t-r-45	transform: rotate(45deg);
t-r-50	transform: rotate(50deg);
t-r-55	transform: rotate(55deg);
t-r-60	transform: rotate(60deg);
t-r-65	transform: rotate(65deg);
t-r-70	transform: rotate(70deg);
t-r-75	transform: rotate(75deg);
t-r-80	transform: rotate(80deg);
t-r-85	transform: rotate(85deg);
t-r-90	transform: rotate(90deg);
t-r-95	transform: rotate(95deg);
t-r-100	transform: rotate(100deg);

This example showcases various rotate() utilities:

• The t-r-15 rotate utility rotates an element by 15 degrees.
• The t-r-30 rotate utility rotates an element by 30 degrees.
• The t-r-60 rotate utility rotates an element by 60 degrees.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-r-15" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-r-60" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:t-r-*,md:t-r-*, lg:t-r-*, and xxl:t-r-* allows targeting specific utilities in different viewports.

<div class="t-r-0 md:t-r-5 ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:t-r-* utility to override elements and change their values when hovering over them.

<div class="t-r-0 h:t-r-5 ..."></div>