Composing transform functions into one line
Moving, rotating, scaling and skewing all live in a single transform declaration. Fields left at their default should be dropped from the output to keep it short, yet hand-written code often keeps useless pieces such as scale(1, 1). This generator removes the default fields and joins only the remaining functions, in order.
Order and origin
transform functions apply in written order, so a rotate after a translate differs from a translate after a rotate. The pivot for rotation and scaling comes from transform-origin, whose default is center, so choosing center writes no declaration at all. Function names and argument syntax follow the W3C CSS Transforms specification (as of October 2026).
What it does not do
It does not produce a duration or an easing curve. To apply the same change gradually you want a transition tool instead. It also leaves out 3D functions such as rotate3d and perspective and the matrix shorthand, and it blocks a scale of 0 and a skew of 90 degrees because both make the element disappear.
Frequently Asked Questions
It does. A rotate after a translate spins around the moved position, while a translate after a rotate moves along the rotated axes.
Width and height become 0 and the element disappears entirely. To flip it left to right use -1 rather than 0.
No. A transform leaves the layout box where it was and only changes where the element is painted, so it can overlap its neighbors.