# transformTemplate
> Customize generated Motion transform strings with transformTemplate.
**Source:** [https://motion.svelte.page/examples/transform-template](https://motion.svelte.page/examples/transform-template)
**Markdown mirror:** [https://motion.svelte.page/examples/transform-template.md](https://motion.svelte.page/examples/transform-template.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `TRANSFORM` | api: `transformTemplate` | input: `style={{ x }}` | mode: `live`
### Notes
- 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.
### Source
#### Default.svelte
Source file: [src/lib/examples/transform-template/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/transform-template/demos/Default.svelte)
```svelte
// transform-templatestate: {state}
// generatedstraight transform
without template
straight
// transformtemplatelift + rotate + generated
with template
{state === 'end' ? 'rewritten' : 'composed'}
same MotionValue xtemplate rewrites the transform string