CSS transform generator
Move the sliders to translate, rotate, scale and skew a box and copy the transform property. The dashed outline shows where the box was before the transform, and the same result is also given as a single matrix().
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Drag the sliders for movement, rotation, scale and skew. Untick “Same scale for X and Y” to stretch one axis.
- Pick a transform origin if the box should turn around a corner or an edge.
- Copy the CSS, or the matrix() form.
How it works
Every part that is not neutral becomes a function: translate(x, y), rotate(angle), scale(x, y) and skew(x, y). The matrix is the product of their matrices in the same order. For a point (x, y) the result is (a·x + c·y + e, b·x + d·y + f), where matrix(a, b, c, d, e, f).
Worked example
rotate(90deg) has cos 90° = 0 and sin 90° = 1, so its matrix is matrix(0, 1, -1, 0, 0, 0). Adding a move first, translate(10px, 20px) scale(2) gives matrix(2, 0, 0, 2, 10, 20): the scale sets a and d to 2 and the translation lands in e and f.
Tips
- For animations, transform and opacity are the properties browsers can animate without recalculating layout.
- Rotations above 360° only matter for animations; a static rotate(370deg) looks like rotate(10deg).
- Translate in percentages refers to the element’s own size, not its parent; this tool uses pixels.
Frequently asked questions
Does the order of transform functions matter?
Yes. The functions apply as written, each in the coordinate system left by the ones before it, so translate then rotate differs from rotate then translate. This tool always writes translate, rotate, scale, skew, the order most layouts expect.
What does transform-origin change?
It is the fixed point for rotate, scale and skew. The default is the centre; top left makes a box rotate around its corner. Translate is not affected.
Does a transform move other elements?
No. A transformed element keeps its original space in the layout and is only drawn elsewhere, which is why transforms are cheap to animate.
When is matrix() useful?
It packs the whole 2D transform into six numbers, which is what getComputedStyle returns. Seeing both forms helps when reading computed styles or matching a design tool's output.