Transform

Canvas ships rotate, scale, and translate utilities, most with hover twins (the .h-* prefix applies the transform on hover).

Rotate

Rotation in 15 degree steps, both positive and negative (the n prefix means negative):

.rotate-0, .rotate-15, .rotate-30, .rotate-45, .rotate-60, .rotate-75, .rotate-90 ... up to .rotate-360, and the negatives .rotate-n15, .rotate-n30, ... .rotate-n360.

Hover twins: .h-rotate-45, .h-rotate-n90, and so on.

Scale

Class	Scale
`.scale-sm`	1.025
`.scale`	1.05
`.scale-lg`	1.1
`.scale-n-sm`	0.975
`.scale-n`	(scale down)
`.scale-n-lg`	(scale down more)

Hover twins: .h-scale, .h-scale-sm, .h-scale-lg, .h-scale-n, .h-scale-n-sm, .h-scale-n-lg.

Translate

Canvas translate helpers plus Bootstrap centering:

Class	Effect
`.translate-middle`	Center on both axes (with position)
`.translate-middle-x`	Center horizontally
`.translate-middle-y`	Center vertically
`.translate-x`, `.translate-x-sm`, `.translate-x-lg`	Shift on X
`.translate-x-n`, `.translate-x-n-sm`, `.translate-x-n-lg`	Shift left on X
`.translate-y`, `.translate-y-sm`, `.translate-y-lg`	Shift on Y

Hover twins exist too: .h-translate-x, .h-translate-y, .h-translate-x-n, and their -sm / -lg sizes.

Usage

Icon that spins on hover:

<i class="h-rotate-45"></i>

Card that grows on hover:

<div class="h-scale-sm shadow-ts h-shadow-lg p-4 rounded-3">Hover to grow</div>

Absolute centering (the classic Bootstrap trick):

<div class="position-relative" style="height: 200px;">
  <span class="position-absolute top-50 start-50 translate-middle">Centered</span>
</div>

Classes

Class	Description
`.translate-x`	Sets the `translateX` Transform Property for an Element Value `.translate-x` - Sets a `translateX` property of 3px on the Element `.translate-x-sm` - Sets a `translateX` property of 6px on the Element `.translate-x-lg` - Sets a `translateX` property of 10px on the Element Hover `.h-translate-x` - Sets a `translateX` property on the Element on Hover Example: [ch_pre] ... [/ch_pre]
`.translate-y`	Sets the `translateY` Transform Property for an Element Value `.translate-y` - Sets a `translateY` property of 3px on the Element `.translate-y-sm` - Sets a `translateY` property of 6px on the Element `.translate-y-lg` - Sets a `translateY` property of 10px on the Element Hover `.h-translate-y` - Sets a `translateY` property on the Element on Hover Example: [ch_pre] ... [/ch_pre]
`.scale`	Sets the `scale` Transform Property for an Element Value `.scale` - Sets a `scale` property of 3px on the Element `.scale-sm` - Sets a `scale` property of 6px on the Element `.scale-lg` - Sets a `scale` property of 10px on the Element Hover `.h-scale` - Sets a `scale` property on the Element on Hover Example: [ch_pre] ... [/ch_pre]
`.transform-ts`	Applies Transform Property Transitions support on the Element
`.all-ts`	Applies All Property Transitions support on the Element Example: [ch_pre] ... [/ch_pre]

Was this page helpful?