logo svelte /motion v0.6.5
FIG-001/ TRANSFORM

generated transforms, custom order.

The payload still uses Motion shorthand x. transformTemplate receives the generated translateX(...) string and adds a matching vertical lift plus skew before writing the final CSS transform.

  • The card's x MotionValue generates the normal horizontal translateX(...) transform.
  • The template uses that same latest x value to add lift and skew before the generated transform.
  • Because the template owns the final string, transform order stays explicit and inspectable.
↩ all examples
api · transformTemplateinput · style={{ x }}mode · live mode · live running source
same MotionValue Generated x, custom final transform
generated straight transform
without template straight
transformTemplate lift + rotate + generated
with template composed
category · transform
sheet · sheet 01 / 01
⟳ to re-run