Rotation

Basic Usage

<div class="motion-rotate-in-90">
  Rotate in
</div>

Rotate in

These are the theme default values. You can customize the theme to add your own values to the motionRotate property or use arbitrary values.

<div class="-motion-rotate-loop-45">
  Continuous rotation
</div>

Continuous rotation

<div class="motion-rotate-loop-[1turn]/reset motion-ease-linear">
  Spinner
</div>

Spinner

<div class="motion-rotate-out-45">
  Rotate out
</div>

Rotate out

<div class="motion-rotate-in-90 motion-scale-in-0">
  Rotate and scale in
</div>

Rotate and scale in

<div class="motion-rotate-in-90 motion-delay-1000">
  Rotate in with delay
</div>

Rotate in with delay