Open any drawing program, a video game, or a phone's photo editor and drag the little handle on a picture: it stretches. Grab the corner and twist: it rotates. Pinch it: it shrinks. Skew it sideways with a slider: it leans over like a shadow at sunset. Every one of those moves — stretch, rotate, shrink, flip, skew — looks completely different on screen, but underneath they are all the exact same kind of operation: a single matrix, multiplying every point on the picture at once. A "transformation" and a "matrix" are the same thing wearing different clothes, and this page is about the one trick that lets you see through the disguise.

Here's the punchline that ties the whole subject together. Because a linear transformation keeps the grid straight, it is completely determined by where it sends just two vectors: \hat{\imath} = \begin{bmatrix}1\\0\end{bmatrix} and \hat{\jmath} = \begin{bmatrix}0\\1\end{bmatrix}. Tell me where those two land, and I can find where any vector goes — because every vector is just a combination of them.

So we record the transformation by stacking the landing spots of \hat{\imath} and \hat{\jmath} as the columns of a matrix:

That is why a matrix times a vector mixes the columns: the columns are the new homes of the basis vectors, and every other vector just rides along as a mixture of them.

Why it works: every vector is a mix of the two

Here's the one-line proof that makes the whole trick legitimate rather than just a lucky shortcut. Any vector v=(x,y) can always be written as v = x\,\hat{\imath} + y\,\hat{\jmath} — that's simply what its coordinates mean. Because a linear transformation respects addition and scaling, applying it to that sum gives:

So once T(\hat{\imath}) and T(\hat{\jmath}) are pinned down — the two columns — the destination of every other point in the plane is just that same mixture, x parts of the first column plus y parts of the second. There is no third case to worry about, no exception to memorise: two columns, and the rest of infinite 2D space comes along for free. (The exact same argument works with three basis vectors in 3D, four in 4D, and so on — this is the one idea that scales to any number of dimensions.)

You choose where the basis lands

The two sliders set where \hat{\imath} (column 1) and \hat{\jmath} (column 2) go. The whole grid follows them rigidly, and the matrix below reads off their coordinates. Place the basis vectors, and you've built the transformation — try to make the grid squash flat, spin round, or stretch long and thin, and watch the readout update as you drag.

Worked example: reading a matrix at a glance

Once you know the trick, you can read a matrix the way you'd read a map legend — no calculation needed, just look at the columns. Take:

The first column is (3, 2), so \hat{\imath} lands at (3, 2). The second column is (-1, 4), so \hat{\jmath} lands at (-1, 4). That's it — you've just described the entire transformation without multiplying anything out. A quick second example: for M = \begin{bmatrix} 0 & 5 \\ -2 & 0 \end{bmatrix}, \hat{\imath} goes to (0, -2) (straight down) and \hat{\jmath} goes to (5, 0) (a long way right) — a combined quarter-turn-and-stretch, read off in two seconds flat.

You can always double-check a column reading against the "mixture" formula from the previous card. Take M = \begin{bmatrix} 3 & -1 \\ 2 & 4 \end{bmatrix} again and the point (2,3). The mixture formula says T(2,3) = 2\,T(\hat{\imath}) + 3\,T(\hat{\jmath}) = 2(3,2) + 3(-1,4) = (6,4)+(-3,12) = (3,16). Multiplying the matrix by the vector the standard way gives the exact same answer: \begin{bmatrix}3&-1\\2&4\end{bmatrix}\begin{bmatrix}2\\3\end{bmatrix} = \begin{bmatrix}3(2)+(-1)(3)\\2(2)+4(3)\end{bmatrix} = \begin{bmatrix}3\\16\end{bmatrix}. Same result, two ways of seeing it — one column-by-column story, one row-by-row calculation.

Worked example: building a matrix from a description

The trick also runs backwards, which is even more useful: given a description of a transformation in words, track where it sends \hat{\imath} and \hat{\jmath}, and those landing spots become the columns.

Say the transformation "doubles every x-coordinate and leaves y alone." Where does \hat{\imath}=(1,0) go? Its x doubles to 2, its y stays 0, so it lands at (2, 0). Where does \hat{\jmath}=(0,1) go? Its x is already 0 (doubling changes nothing), and its y is untouched, so it stays at (0, 1). Stack those as columns:

Try one more: "reflect everything across the x-axis" (flip upside down). \hat{\imath}=(1,0) sits on the x-axis, so flipping leaves it exactly where it was: (1, 0). But \hat{\jmath}=(0,1) is above the axis, so flipping sends it below to (0, -1). The matrix is \begin{bmatrix} 1 & 0 \\ 0 & -1 \end{bmatrix} — notice only the sign of the bottom-right entry changed, exactly matching the one thing that physically moved.

Worked example: transforming a whole shape

Because every point rides along with the basis vectors, applying a matrix to a shape is just applying it to each of the shape's corners in turn. Take a triangle with corners at (0,0), (2,0) and (0,1), and apply M = \begin{bmatrix} 1 & 1 \\ 0 & 1 \end{bmatrix} (columns tell us \hat{\imath}\to(1,0), unchanged, and \hat{\jmath}\to(1,1), leaning over).

• (0,0) is the origin, and every linear map fixes the origin, so it stays at (0,0).
• (2,0) = 2\hat{\imath}, so it goes to 2\,(1,0) = (2,0) — unchanged, since this point never used \hat{\jmath} at all.
• (0,1) = \hat{\jmath}, so it goes straight to (1,1).

The bottom edge of the triangle (along the x-axis) doesn't move at all, while the top corner slides sideways — the whole triangle leans over into a slanted parallelogram wedge, exactly the "shear" you get pushing the top of a stack of playing cards while the bottom stays put. Nothing here needed guesswork: once you know where the two basis vectors land, every other point's destination falls straight out of the columns.

This is exactly how a font-rendering engine slants upright letters into italics, and how a game engine deforms a sprite made of hundreds of triangles in one pass: it never touches the triangles directly. It touches only \hat{\imath} and \hat{\jmath}, and lets every one of those vertices — three, thirty, or three thousand of them — follow along automatically, because each vertex is secretly just some amount of \hat{\imath} plus some amount of \hat{\jmath}.

Reading a matrix at a glance

From now on you can read a 2×2 matrix as a motion: glance at its first column to see where \hat{\imath} goes, its second to see where \hat{\jmath} goes, and picture the grid stretching to match. Every named transformation that follows — rotation, scaling, shear — is just a particular choice of those two columns.

See it explained