2D Transform Matrix Composer
Compose translate / rotate / scale / skew into a single 3×3 matrix.
Overview
The 2D Transform Matrix Composer turns a sequence of geometric operations — translate, rotate, scale and skew — into a single 3x3 affine matrix you can drop straight into CSS, SVG or HTML canvas. Instead of chaining transform: translate(...) rotate(...) declarations and hoping the order matches what your designer intended, you compose the steps once and copy the resulting matrix.
This composer is aimed at front-end developers building animations, game devs prototyping sprite transforms and graphics students learning how affine matrices multiply. It is especially handy for debugging the difference between pre-multiplied and post-multiplied transforms when an element ends up rotated about the wrong pivot.
How it works
In homogeneous coordinates every 2D affine transformation is represented by a 3x3 matrix. Translation by (tx, ty), rotation by angle θ, non-uniform scaling by (sx, sy) and skew by (αx, αy) each have a canonical form. Composing operations is matrix multiplication: the right-most matrix is applied first, so M = T * R * S means "scale, then rotate, then translate."
The final matrix has the layout [[a, c, e], [b, d, f], [0, 0, 1]], which maps to CSS's matrix(a, b, c, d, e, f). Every output transform is exact up to floating-point rounding because the operations are composed symbolically before being evaluated.
Examples
Translate(100, 50) → matrix(1, 0, 0, 1, 100, 50)
Rotate(90deg) → matrix(0, 1, -1, 0, 0, 0)
Scale(2, 0.5) then Translate(10, 0) → matrix(2, 0, 0, 0.5, 20, 0)
Translate(50, 50) → Rotate(45) → Translate(-50, -50)
gives a rotation about the point (50, 50).
FAQ
Does the order of operations matter?
Yes. Matrix multiplication is not commutative, so translate then rotate produces a very different result from rotate then translate. The composer applies operations top-to-bottom in the order you list them.
Can I paste the result into SVG?
Yes. SVG accepts transform="matrix(a b c d e f)" with the same six values in the same order as CSS.
How is skew defined?
Skew angles αx and αy contribute tan(αx) and tan(αy) to the off-diagonal positions. Large skew angles approach a singular matrix.
Why are there only six output numbers when the matrix is 3x3?
The bottom row of an affine matrix is always 0 0 1, so it is omitted in CSS and SVG shorthand.
Is the matrix invertible?
Only if the determinant a*d - b*c is non-zero. Pure rotations, translations and non-zero scales are always invertible; degenerate scales (sx = 0) are not.