Docs / Transform — Rotate

Transform — Rotate

vel-src: transitions.css

Utilities for rotating elements.

ClassProperties
vel-rotate-0transform: rotate(0deg)
vel-rotate-1transform: rotate(1deg)
vel-rotate-2transform: rotate(2deg)
vel-rotate-3transform: rotate(3deg)
vel-rotate-6transform: rotate(6deg)
vel-rotate-12transform: rotate(12deg)
vel-rotate-45transform: rotate(45deg)
vel-rotate-90transform: rotate(90deg)
vel-rotate-180transform: rotate(180deg)
-vel-rotate-1transform: rotate(-1deg)
-vel-rotate-2transform: rotate(-2deg)
-vel-rotate-3transform: rotate(-3deg)
-vel-rotate-6transform: rotate(-6deg)
-vel-rotate-12transform: rotate(-12deg)
-vel-rotate-45transform: rotate(-45deg)
-vel-rotate-90transform: rotate(-90deg)
-vel-rotate-180transform: rotate(-180deg)

Examples

Rotate 45 degrees

45°
example.html
<div class="vel-rotate-45 vel-bg-primary vel-text-white vel-rounded-sm vel-inline-block" style="padding:1rem">
  45°
</div>

Animated rotate on hover

↑
example.html
<div class="vel-transition-transform vel-duration-300 vel-hover:rotate-180 vel-bg-surface-1 vel-text-primary vel-rounded-lg vel-inline-flex vel-items-center vel-justify-center vel-cursor-pointer" style="width:2.5rem;height:2.5rem;border:1px solid #1e2d45">
  &#8593;
</div>