Animation9 min

Rotate = Transpose + Flip

One confusing rotation becomes two clean sub-moves.

Rotating a matrix 90° in your head is hard because every cell seems to move somewhere unrelated. This animation splits the rotation into the two moves that are each easy to follow.

First, the transpose: watch each cell pair flip across the main diagonal — (i, j) trades places with (j, i) — turning every row into a column. The diagonal cells stay put; everything else swaps in mirrored pairs. Second, each row mirror-flips left to right. Follow one cell through both moves — the top-left 1, say — and confirm it lands exactly where a clockwise quarter-turn would put it: top-right. Two trivially codeable moves compose into the rotation that felt impossible to index directly.

Then switch to spiral mode: four colored boundary pointers — top, bottom, left, right — frame the unvisited rectangle while the walk paints cells in spiral order. Watch each boundary step inward the moment its row or column is consumed, and pay special attention when the rectangle collapses to a single row or column: this is exactly where the guard checks (top still at-or-above bottom, left still at-or-left-of right) save you from painting the same cells twice.