Skip to main content
Version: 1.1

Translate

Control the Translate of an element using the syntax list below. It will automatically generate width based on amount.

SyntaxOutput
translate-x-{amount}{ transform: [{ translateX: {amount} }] }
translate-y-{amount}{ transform: [{ translateY: {amount} }] }
-translate-x-{amount}{ transform: [{ translateX: -{amount} }] }
-translate-y-{amount}{ transform: [{ translateY: -{amount} }] }

Example​

Input​

apply("translate-x-50")
apply("translate-y-50")
apply("-translate-x-100")
apply("-translate-y-100")

Output​

{
  transform: [{ translateX: 50 }]
}
{
  transform: [{ translateY: 50 }]
}
{
  transform: [{ translateX: -100 }]
}
{
  transform: [{ translateY: -100 }]
}