Rotate a cube
Drag the cube, or move the three sliders. Each slider turns the cube about one axis: x points right, y points up, z points out of the screen at you. The grid of nine numbers underneath is the rotation matrix. Watch it change as the cube turns. Start by pressing Zero the angles, then move one slider at a time and see which numbers stay put.
What's going on
The cube is a list of 8 corners, each with three coordinates, such as (1, 1, 1) or (−1, 1, −1). Nothing more. To turn the cube, multiply every corner by the same 3 × 3 matrix. To draw it, work out where each corner lands on the screen and join the corners with 12 lines.
Read the columns. The three coloured arrows start as the x, y and z axes. The first column of the matrix is where the x arrow points now, the second is the y arrow, the third is the z arrow. Each arrow still has length 1, and the three are still at right angles. That is what makes it a rotation and not a stretch or a squash.
One axis at a time. A turn about z by an angle θ sends (x, y, z) to (x cos θ − y sin θ, x sin θ + y cos θ, z). It is a turn of the flat plane, with z left alone. Turns about x and y work the same way with the letters swapped. The matrix shown is the three turns multiplied together: the x turn is done first, then y, then z.
Order matters. Set x to 90° and y to 90° and note where the orange corner P lands. Doing the y turn first and the x turn second would put it somewhere else. Try it with a book: a quarter turn forwards then a quarter turn sideways is different from sideways then forwards.
Getting to the screen. With perspective off, the screen position is the x and y of each corner, and z is thrown away. With perspective on, corners nearer to you are drawn further from the centre: x and y are multiplied by 6 ÷ (6 − z), as if your eye were 6 units from the middle of the cube. That is why the near face looks bigger.
Sheet: How a screen turns a cube. A cousin of this demo: matrices in the plane.