Composing Transformations

Think of animating a robot arm in a video game. The shoulder rotates. Nested inside that rotation, the elbow bends. Nested inside that, the wrist twists, and nested inside the wrist, the fingers curl. Four separate motions, each riding on top of the last — yet the engine renders the whole arm in real time, every frame, without ever "doing" four motions in sequence at draw time. How? It multiplies the four matrices together once, and applies the single result.

Doing one transformation and then another is called composing them, and composing transformations is exactly what matrix multiplication was built to compute. Applying B and then A to a vector means computing A(B\vec{x}) — and there is a single matrix that does both in one step. It is exactly the matrix product:

A(B\vec{x}) = (AB)\vec{x}.

So that strange "row dot column" rule was never arbitrary — it's engineered precisely so that the product matrix performs the two motions back to back. Note the order, and read it slowly: the matrix applied first sits on the right, nearest the vector, and the matrix applied second sits on the left, furthest from the vector. AB means "B first, A second" — the opposite of how you'd read it left to right in English.

Building the recipe from basis vectors

Why does multiplying matrices — that row-times-column arithmetic — actually reproduce "do this, then that"? Follow the basis vectors through both steps, the same trick used to find any matrix in the first place.

Suppose B sends \hat{\imath} to some point B\hat{\imath}. Feed that point into A, and you get A(B\hat{\imath}) — where \hat{\imath} ends up after both transformations. Do the same for \hat{\jmath}, and you have the images of both basis vectors under the combined motion — which is precisely the definition of a new matrix: the columns of AB are A(B\hat{\imath}) and A(B\hat{\jmath}). Matrix multiplication is just this basis-vector bookkeeping, packaged into a formula you can crank without redrawing a single picture.

Order changes everything

Here R is a rotation and S a horizontal stretch. Flip the toggle to compose them both ways. "Rotate then stretch" (SR) lands the grid somewhere quite different from "stretch then rotate" (RS) — the very reason matrix multiplication isn't commutative.

Worked examples

1. Two routes to the same answer. Let A = \begin{bmatrix} 0 & -1 \\ 1 & 0 \end{bmatrix} (a 90° rotation) and B = \begin{bmatrix} 2 & 0 \\ 0 & 1 \end{bmatrix} (stretch x by 2), applied to the point (1, 1), with B first.

Step by step: first B(1,1) = (2, 1), then A(2,1) = (-1, 2).

Via the combined matrix: compute AB by sending each basis vector through B then A: \hat{\imath} \to (2,0) \to (0,2) and \hat{\jmath} \to (0,1) \to (-1,0), giving AB = \begin{bmatrix} 0 & -1 \\ 2 & 0 \end{bmatrix}. Apply it directly to (1,1): (0(1) + (-1)(1),\ 2(1) + 0(1)) = (-1, 2). Both routes agree — that agreement is the entire point of building AB in the first place.

2. Composing two shears. A horizontal shear H = \begin{bmatrix} 1 & 1 \\ 0 & 1 \end{bmatrix} followed by a vertical shear V = \begin{bmatrix} 1 & 0 \\ 1 & 1 \end{bmatrix} (so H first, compute VH) gives

VH = \begin{bmatrix} 1 & 0 \\ 1 & 1 \end{bmatrix}\begin{bmatrix} 1 & 1 \\ 0 & 1 \end{bmatrix} = \begin{bmatrix} 1 & 1 \\ 1 & 2 \end{bmatrix}.

That result is neither a pure horizontal nor a pure vertical shear — it tilts both basis vectors and even changes area (its determinant is 1(2)-1(1)=1, so area happens to survive here, but not every shear-of-a-shear is so tidy). Chaining simple moves can produce a matrix with no simple name at all — and that's completely normal.

3. Order really does matter. Take an asymmetric shape — an "L" — and compare "rotate 90°, then stretch x by 2" against "stretch first, then rotate". Rotating first and then stretching pulls the rotated L sideways, distorting it one way; stretching first and then rotating spins an already-stretched L into a completely different orientation. Try both directions in the interactive grid above — the resulting grids are visibly different shapes, not just rotated copies of each other.

Chains of motion

Any sequence of linear moves — rotate, scale, shear, reflect, in any order — collapses into one matrix, their product. This is why graphics engines multiply a stack of matrices into a single one before drawing, and why a deep neural network is, layer by layer, a chain of matrix products with a little nonlinearity sprinkled between. One matrix, many motions.

There is one piece of good news buried in all this order-sensitivity: while you can never swap the order of a chain of transformations, you're always free to change how you group them. Composing three transformations C, then B, then A can be computed as A(BC) or as (AB)C — multiply B and C together first, or multiply A and B together first — and both give the exact same final matrix. Matrix multiplication is associative even though it isn't commutative: the sequence C, B, A is fixed, but where you put the parentheses is entirely up to you. A shoulder-elbow-wrist rig can precompute "shoulder then elbow" as one matrix and combine it with the wrist later, or precompute "elbow then wrist" first and fold the shoulder in afterwards — the rendered pose comes out identical either way.

Matrix multiplication is not commutative. With ordinary numbers, 3 \times 5 and 5 \times 3 are the same thing, so it's tempting to assume AB and BA must agree too. They almost never do. Rotating a stretched rectangle looks completely different from stretching an already-rotated one — the interactive grid above shows exactly this. Whenever you write down a product of matrices, treat the order as load-bearing information, not a cosmetic choice.

The second trap is reading direction. In the expression AB, it is tempting — because we read left to right — to assume A happens first. It's the opposite: the rightmost matrix, the one sitting closest to the vector it will eventually multiply, acts first. "First applied, last written" is the rule, and it catches almost everyone the first time they compose three or more matrices in a chain.

Every character in a modern 3-D game or animated film is posed by a chain of composed matrices — rotate the shoulder, then nested inside that, rotate the elbow, then nested inside that, the wrist, then the fingers. Studios call this a "hierarchy" or "rig", and under the hood it's nothing but a growing product of matrices, multiplied together once per frame so the whole pose renders instantly.

That nesting has a sting in its tail: to undo a chain of operations, you can't just undo them in the order you did them — you have to reverse the whole chain in the opposite order, and each step has to be individually un-done too. Put on socks, then shoes: to reverse it you must take off the shoes first, then the socks — not the other way round. Vector-graphics and CAD software that lets you "undo" a stack of rotate/scale/move edits is quietly doing exactly this: peeling the transformation chain apart from the last matrix applied back to the first, each one inverted in turn.