# transformTemplate > Customize the generated CSS transform string for motion components. **Source:** [https://motion.svelte.page/docs/transform-template](https://motion.svelte.page/docs/transform-template) --- `transformTemplate` lets a motion component customize the final CSS `transform` string that Motion writes to the element. Motion still builds the generated transform from shortcuts like `x`, `y`, `scale`, and `rotate`. Your template receives both the latest transform values and the generated string, then returns the transform that should be rendered. ```svelte ``` > Live example: [/examples/transform-template](https://motion.svelte.page/examples/transform-template) ## Callback Shape ```ts type TransformTemplate = ( transform: Record, generatedTransform: string ) => string ``` - `transform` contains the latest transform shortcut values with CSS units applied. For example, `x: 10` is passed to the template as `"10px"`, and `rotate: 45` is passed as `"45deg"`. - `generatedTransform` is the string Motion would normally write, such as `"translateX(10px) rotate(45deg)"`. - The returned string becomes the element's final inline `transform`. ## MotionValue Styles `transformTemplate` also works with MotionValues inside object-form styles: ```svelte `skewY(-2deg) ${generated}`} /> ``` When `x` changes, the generated transform and the templated transform update together. ## API Reference ### `transformTemplate` ```ts transformTemplate?: TransformTemplate ``` Pass a callback to any `motion.*` component. The callback receives latest transform shortcut values and the generated transform string. Based on [Motion's transformTemplate prop](https://motion.dev/docs/react-motion-component#transformtemplate).