What Does a Matrix Actually Do?
These are my visual notes from studying linear algebra. I built this playground because I couldn't understand matrices until I could drag them around. Now you can too.
Four numbers. That's all it takes to rotate, stretch, squish, or completely flatten a plane.
Watch what four numbers can do...
See how the whole grid moved? Those four numbers in the matrix just repositioned every point on the plane simultaneously. A matrix is a function: put a point in, get a new point out.
Most of linear algebra class is spent memorizing how to multiply rows by columns. But that's like learning to drive by studying the engine. Let's start with what you can see.
The Columns Are the Secret
Most people think of a matrix as a grid of numbers. Something you plug values into and crank out an answer. But there's a much better way to think about it.
Look at the red arrow in the grid above. Before any transformation, it sits at [1, 0], pointing straight right. That's the first basis vector. Now look at the first column of the matrix. Same numbers. The first column is literally just the answer to: “where did the red arrow end up?”
Blue arrow, second column. Same deal. The second column answers “where did the blue arrow end up?”
Think about what this means. You don't need to understand the whole matrix at once. You just need to answer two questions: where does [1, 0] go? Where does [0, 1] go? Write those two answers as columns, and you've got the matrix.
Drag the red arrow to a new position and watch the first column update live. The matrix isn't generating those numbers through some hidden formula. The column IS the arrow. They're the same thing.
Once this clicked for me, everything else in linear algebra got easier. A matrix isn't a table of data you have to memorize. It's two arrows. Two destinations. An entire coordinate system defined by where [1, 0] and [0, 1] land after the transformation.
Column 1 = where the red arrow lands. Column 2 = where the blue arrow lands. That's the whole matrix.
Try this
Can you find a matrix that rotates exactly 180°? Hint: where should [1, 0] and [0, 1] end up if everything flips?
How Every Point Moves
Now that you know where the basis vectors land, here's the punchline: that's all you need to figure out where ANY point goes.
Take a point like [3, 2]. It's really 3 copies of [1, 0] plus 2 copies of [0, 1]. After the transformation, [1, 0] became column 1 and [0, 1] became column 2. So [3, 2] becomes 3 times column 1 plus 2 times column 2.
Let's walk through a concrete example. Set the matrix to a 45° rotation (click “Rotate 90°” above, then drag a bit back). Now take the point (1, 1). Column 1 is roughly [0.71, 0.71] and column 2 is roughly [-0.71, 0.71]. So:
The point (1, 1) moved straight up. Click it on the grid below to confirm.
Click any point on the grid to see this calculation with your current matrix.
Want to know what a matrix does to any point? Ask where it sends [1, 0] and [0, 1]. Every other point is just a weighted mix of those two answers.
Rotation, Scaling, and Shearing
We've been playing with individual transformations. But what makes them different? Rotation, scaling, and shearing sound like separate operations, but they're all the same thing: pick four numbers, put them in a matrix.
Rotation uses cos and sin to keep the arrows the same length while spinning them. Scaling puts numbers on the diagonal to stretch each axis independently. Shearing nudges one off-diagonal entry, which tilts the grid without changing the axis it acts along.
Move the sliders and pay attention to how the matrix entries change. The connection between “what the numbers are” and “what the grid does” starts to become obvious.
The Determinant: Tracking Area
Keep an eye on the determinant while you play with the sliders above. When you rotate, it stays at 1. The grid spins but every shape keeps its area. Shearing is the same: det = 1, always. The grid looks completely different but the area of any region hasn't changed. Scaling is where the determinant moves. Scale x by 2 and y by 3 and det = 6. The grid stretched to 6 times its original area.
When the determinant hits zero, the grid collapses to a line. The matrix crushed 2D into 1D. Information got destroyed. You can't undo that because you can't un-flatten a pancake. That's why det = 0 means there's no inverse matrix.
When the determinant goes negative, the grid flips. Like looking at it in a mirror. The orientation of clockwise and counterclockwise swaps. Try setting scale y to -1 to see this.
Try this
Can you find a matrix where det = 0 but neither column is the zero vector? What does the grid look like? (Hint: what happens when both columns point in the same direction?)
Matrices Are Everywhere
Arthur Cayley formalized matrix algebra in 1858. He probably didn't imagine his work would end up powering every 3D game, every AI model, and every CSS animation on the internet. But here we are. The 2×2 playground above is a miniature version of something that runs at massive scale in at least three places you use daily.
CSS Transforms
When you see a webpage element rotate or skew, your browser is doing a matrix multiply. CSS has a transform: matrix(a, b, c, d, tx, ty) property that takes the same numbers you've been dragging around. The first four arguments are literally a 2×2 matrix. The last two handle translation (sliding), which is why CSS uses a 3×3 matrix under the hood.
Change the values below and watch the card move. These are the same matrix entries from the playground. Same math, different renderer.
CSS transform: matrix()
transform: matrix(1, 0, 0, 1, 0, 0)
Neural Networks
A neural network layer takes an input vector, multiplies it by a weight matrix, adds a bias, and applies a nonlinear activation function like ReLU. That first step is exactly the transformation you've been watching. The grid warps, and data points move to new positions.
“Training” a neural network means searching for the right matrix entries so that the combined transformation maps inputs to correct outputs. The 2×2 grid you played with above is literally a one-layer network with 2 inputs and 2 outputs. If you added a ReLU (zeroing out negative values after the multiply), you'd have a complete neural network layer.
GPT-4 works the same way. The matrices just have billions of entries instead of four, and there are dozens of layers stacked together. But the core operation is always the same: multiply by a matrix, transform the space.
Computer Graphics
A 3D game transforms every object through a chain of matrices each frame: model space to world space to camera space to your screen. Each link in that chain is a matrix multiply. A single character model might go through 5-10 matrix transformations before a single pixel gets drawn.
The entire GPU industry exists because of this. That's not an exaggeration. Millions of vertices, 60 times a second, each one multiplied by a matrix.
Your Matrix Laboratory
Open playground. The determinant in the corner tracks area scaling. It goes negative when you flip the plane and hits zero when you collapse it to a line. Try to break things.
Try this
Try to make the grid spell a letter. Which combination of shear, scale, and rotation gets you closest?
Before you leave, scroll down. This all works in 3D too.
A Taste of 3D
Same concept, one more dimension. A 3×3 matrix has three columns for three basis vectors. The colored parallelograms show the plane spanned by each pair. Drag the arrow tips. Orbit to rotate the view.
What's Next
This is the first in a series of interactive visual essays covering linear algebra, calculus, probability, ML, and GPU programming. Each one takes a concept I struggled with and turns it into a playground until the math clicks.
- Matrices in 3D — Euler angles, gimbal lock, and why rotation order matters. The 3D preview above becomes a full essay.
- How to Make Sense of 4 Dimensions and Up — You can't draw it, but the math still works. Projections, slicing, and why linear algebra lets you work in dimensions you can't see.
- The Eigenvector That Refused to Move — Most vectors spin around when you transform them. Eigenvectors just stretch.