Transform

List of Transform Utility Classes included with Canvas.

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

Ex:

<div class="transform-ts h-translate-x">
	...
</div>

.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

Ex:

<div class="transform-ts h-translate-y">
	...
</div>

.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

Ex:

<div class="transform-ts h-scale">
	...
</div>

.transform-ts

Applies Transform Property Transitions support on the Element

.all-ts

Applies All Property Transitions support on the Element

Ex:

<div class="all-ts h-translate-y h-op-08">
	...
</div>

Last Modified: December 23, 2020