Rotate & Flip
Rotate icons in 90° steps or mirror them horizontally/vertically — no custom CSS needed.
Rotation
| Class | Transform | Preview |
|---|---|---|
.trker-rotate-90 |
rotate(90deg) | |
.trker-rotate-180 |
rotate(180deg) | |
.trker-rotate-270 |
rotate(270deg) |
Flip
| Class | Transform | Preview |
|---|---|---|
.trker-flip-h |
scaleX(-1) — horizontal mirror | → |
.trker-flip-v |
scaleY(-1) — vertical mirror | → |
Live Example
The same trker-arrow-right icon in all orientations:
default
rotate-90
rotate-180
rotate-270
flip-h
flip-v
<i class="trker trker-arrow-right"></i>
<i class="trker trker-arrow-right trker-rotate-90"></i>
<i class="trker trker-arrow-right trker-rotate-180"></i>
<i class="trker trker-arrow-right trker-rotate-270"></i>
<i class="trker trker-arrow-right trker-flip-h"></i>
<i class="trker trker-arrow-right trker-flip-v"></i>These classes use CSS transform. If you're combining with other transforms (e.g. Tailwind's scale-*), use a wrapper element to avoid conflicts.