Transform

List of Transform Utility Classes included with Canvas.

Classes

ClassDescription
.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-tsApplies Transform Property Transitions support on the Element
.all-tsApplies All Property Transitions support on the Element
Example: [ch_pre]
...
[/ch_pre]