Open any drawing app, game editor or vector illustrator and you will spend your day doing four things to shapes: sliding them across the canvas, turning them, growing or shrinking them, and occasionally slanting them. On a computer every one of those moves is the same operation underneath — a shape is just a list of corner points, and moving the shape means running each corner through a little matrix. Learn the matrix and you have learned every 2-D transform at once.

A point in the plane is a column vector \begin{bmatrix}x\\y\end{bmatrix}. The engine of computer graphics is the fact that a matrix times a vector is a transformation: a 2\times2 matrix M sends every corner (x,y) to a new corner M\begin{bmatrix}x\\y\end{bmatrix}. Apply the same M to all of a shape's vertices and the whole shape moves as one.

The three matrices you use every day

Scale stretches the axes independently — factor s_x along x and s_y along y. Set them equal for a uniform zoom; a negative factor flips (reflects) that axis:

Rotate spins the plane about the origin by an angle \theta. It is built straight out of sine and cosine — the very same rotation matrix that spins every icon on your screen:

Shear slants a shape sideways, turning a square into a leaning parallelogram — the "italic" transform. A horizontal shear by factor k pushes points rightwards in proportion to their height:

Scale, rotate and shear all fix the origin — the point (0,0) maps to itself, because M\cdot\mathbf{0} = \mathbf{0} for any matrix. That is exactly why the fourth move, translation (sliding), is the odd one out.

Translation: the one that breaks the pattern

Sliding a shape by (t_x, t_y) means adding the same offset to every point, (x, y) \mapsto (x + t_x,\; y + t_y). But no 2\times2 matrix can do this, because every 2\times2 matrix pins the origin in place, and a genuine slide moves the origin. The fix graphics programmers use is beautifully simple: bolt a constant 1 onto each point as a third coordinate and use a 3\times3 affine matrix, where the extra column carries the translation:

Now translation, rotation, scale and shear all live in one uniform 3\times3 world and can be multiplied together — the trick that makes a transform pipeline possible. It is worth its own page: homogeneous coordinates.

Grab the sliders

The dashed outline is the original little house; the solid one is the house after we scale it by s and then rotate it by \theta — that is, we apply the single matrix M = R(\theta)\,S to every one of its five corners. Slide the scale down past zero and watch the house flip inside out; sweep the angle and watch it spin. The readout shows the live entries of M.

Worked example: transform one corner by hand

Take the corner (3, 1) and scale it by 2 in x and 3 in y:

Now shear that result horizontally by k = 2. Only the x-coordinate changes, by k times the height:

The point that started at (3,1) now sits at (12,3). Do that to all four corners of a square and you get a stretched, slanted parallelogram — a whole shape transformed, one matrix-times-vector at a time.

Order matters, and area is the determinant

Doing scale-then-rotate is the matrix R\,S; doing rotate-then-scale is S\,R — and matrix multiplication does not generally commute, so R\,S \neq S\,R. Swapping the order of two transforms usually gives a different final shape. This trips up beginners constantly, so it is worth burning in: the transform written on the right is applied to the point first.

There is a lovely bonus fact. The determinant of the matrix tells you exactly how much the transform scales area. A pure scale S=\begin{bmatrix}s_x&0\\0&s_y\end{bmatrix} multiplies areas by s_x s_y; a rotation has determinant 1 and so never changes area; a shear also has determinant 1 — a slanted square has the same area as the square it came from. If the determinant is negative, the shape has been flipped (its orientation reversed).