CSS Transform Generator
transform: translate(0px, 0px) rotate(15deg) scale(1) skew(0deg, 0deg);The CSS transform generator combines translate, rotate, scale and skew into a single transform rule. Transform functions are applied right to left, so the order they appear in changes the result, rotating then translating moves the element along its own rotated axes, not the page axes.
How it works
A transform is a matrix multiplication, and matrix multiplication is not commutative. The practical consequence is that reordering the functions in a transform gives a different visual result even with identical values.
- translate moves the element without affecting layout, so neighbours do not shift.
- rotate turns it around the transform origin, which defaults to the centre.
- scale multiplies its size; values below 1 shrink it, and negative values flip it.
- skew slants the element along the X or Y axis, in degrees.
This tool writes the functions in a fixed order (translate, rotate, scale, skew) which is the conventional sequence and behaves the way most people expect.
Examples
A tilted card
Rotate
15deg
Scale
100%
Result
transform: translate(0px, 0px) rotate(15deg) scale(1) skew(0deg, 0deg);
Rotation happens around the element centre by default. Add transform-origin to pivot from a corner instead.
Scale and offset together
Translate X
40px
Scale
150%
Result
transform: translate(40px, 0px) rotate(0deg) scale(1.5) skew(0deg, 0deg);
Because functions apply right to left, the scale is applied first and the translate afterwards, so the element moves 40px regardless of the scale. Swapping the order would move it 60px.
Frequently asked questions
Why does changing the order of transform functions change the result?
Because transforms compose as matrix multiplications, and those are not commutative. Functions apply right to left: rotate then translate moves along the rotated axes, while translate then rotate moves along the page axes and then spins in place.
Does transform affect the layout of surrounding elements?
No. A transformed element keeps its original layout box, so neighbours do not move and a scaled element can overlap them. Use margin or a layout change if you need surrounding content to respond.
Why is transform preferred over animating top and left?
Because transform and opacity can be handled by the compositor without recalculating layout, so they animate smoothly. Animating top or left forces layout on every frame, which is the usual cause of janky movement.
How do I rotate around a corner instead of the centre?
Set transform-origin, which defaults to 50% 50%. transform-origin: top left pivots from the top-left corner. This tool does not expose it, since it is a separate property rather than part of the transform value.