What the CSS Transform Generator does
This CSS transform generator lets you stack translate, rotate, scale, skew and 3D functions in any order, set the transform origin and the parent's perspective, and see the result against the untransformed outline. It gives you the transform declaration and the same transform as a single matrix() or matrix3d(), and it shows what happens if you reverse the order.
Order is the part most people get wrong: rotate(45deg) translateX(80px) and translateX(80px) rotate(45deg) put the element in different places. The matrices here are multiplied exactly as the CSS Transforms specification describes, in your browser.
How to use it
- Load an example or add functions from the list. Each row is one function; they apply in the order shown.
- Type the values: pixels for translations, degrees for rotations and skews, plain numbers for scale (1 is unchanged, -1 mirrors).
- Move a function earlier with the arrow, or press Reverse order to compare the other ordering.
- Set transform-origin to change the point the element rotates and scales around (50% 50% is the centre), and give the parent a perspective for 3D functions to look three-dimensional.
- Copy the transform, or the equivalent matrix when you need a single value, for example to interpolate in JavaScript.
Reading the results
The CSS lists the functions exactly as you ordered them. Browsers read the list left to right as a chain of coordinate systems: each function moves or turns the axes that the next function then works in.
The matrix is the product of all the functions. A 2D list gives matrix(a, b, c, d, e, f), where e and f are the final translation; anything with a Z component or perspective needs matrix3d() with 16 values in column order.
The order statistic compares your list with its reverse. When they differ, the note shows where a point 60px to the right of the origin ends up in each case.
Worked example: rotate then move versus move then rotate
rotate(45deg) translateX(80px) first turns the element's axes by 45 degrees, then moves 80px along the turned x-axis. The move ends up diagonal: 80 x cos 45 = 56.57px right and 80 x sin 45 = 56.57px down, so the matrix is matrix(0.707107, 0.707107, -0.707107, 0.707107, 56.568542, 56.568542).
translateX(80px) rotate(45deg) moves 80px straight right, then turns the element in place: matrix(0.707107, 0.707107, -0.707107, 0.707107, 80, 0). The rotation part is identical; only the translation differs. That difference is the whole reason orbit animations put rotate first.
Formulas and scoring rules
- 2D matrix
matrix(a, b, c, d, e, f) maps (x, y) to (a x + c y + e, b x + d y + f)- Rotation
rotate(t) = matrix(cos t, sin t, -sin t, cos t, 0, 0)- Skew
skewX(t) = matrix(1, 0, tan t, 1, 0, 0); skewY(t) = matrix(1, tan t, 0, 1, 0, 0)skew(90deg) is infinite and refused.- Composition
M = M1 x M2 x ... x Mn for transform: f1 f2 ... fnValues are rounded to 6 decimal places.
Limitations: what the result does not prove
- Translations are entered in px. Percentages in translate() refer to the element's own size and cannot be folded into a fixed matrix without knowing that size.
- transform-origin is applied by the browser around the matrix; the matrix itself is written relative to the origin, as CSS defines.
- 3D results depend on the parent's perspective and on transform-style; nested 3D scenes need preserve-3d, which this tool does not set.
- Large rotations and scales of text can hurt legibility, and motion based on transforms should respect reduced-motion preferences.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Transforms Module Level 2 - checked 19 Sep 2026
- W3C - CSS Transforms Module Level 1
- MDN - transform
Frequently asked questions
Why does the order of CSS transform functions matter?
Each function transforms the coordinate system that the following functions work in. Rotating first turns the axes, so a later translate moves along the turned axes. Matrix multiplication is not commutative, so the reversed list usually lands somewhere else.
What does transform-origin change?
It sets the fixed point for rotation, scaling and skewing. The default 50% 50% is the centre of the element; 0% 0% is the top-left corner, so rotating then swings the element around that corner like a door on a hinge.
How do I read a CSS matrix() value?
matrix(a, b, c, d, e, f) is a 2D affine transform. a and d mainly scale, b and c mainly rotate and skew, and e and f are the horizontal and vertical translation in pixels. A plain rotation of angle t is matrix(cos t, sin t, -sin t, cos t, 0, 0).
Why does rotateY look flat without perspective?
Without perspective the browser projects the 3D result straight onto the screen, so turning a card around its vertical axis only makes it narrower. Setting perspective on the parent, for example 600px, makes the nearer edge larger and the effect reads as depth.
Is transform better than changing top and left?
For movement and animation, usually yes. transform does not change layout, so the browser does not have to reposition other elements, and it can often be handled on the graphics compositor. Changing top or left moves the element in layout and can cause stutter.
How do I mirror an element with CSS?
Use scaleX(-1) for a horizontal mirror or scaleY(-1) for a vertical one. The element keeps its layout size and position; only its drawing is flipped around the transform origin. Text becomes mirrored too, so it is best kept for icons and images.
Last reviewed by the A2Z.Tools team against the sources listed above.
