Translation is not linear, but you can represent it as a linear map on n+1 dimensional projective space. "Homogeneous coordinates" is the relevant phrase for computer graphics.
I am sorry for the confusion in my article. I should have probably clarified that this is a 2D point in a 2D space. To make the transformations work correctly you need to represent a 2D point as a 3x1 matrix.
And if you want to perform the same in a 3D space, then a 3D point should be represented as a 4x1 matrix, where the last row is always 1.
As a sibling comment mentioned, translation is not linear so say you want to move your box a bit to the left. You can't do this by multiplication by any 2x2 matrix. This is because what you need is an affine transform and what you have is a linear transform. So you can scale things, rotate them and shear them (squish them along the diagonals) but what you can
...do is pop up a dimension, shear in that dimension, then project into your original dimension. This will make sense if we think of an example.
Say we're working in 2d and have a unit square starting at the origin and we want to translate it right by 1. This is not possible with any kind of matrix multiplication by a 2x2 matrix. That's easy to confirm if you just try it but trivially the lower right hand corner is on the origin and anything you multiply by zero is going to be zero. So any 2x2 matrix you multiply the coordinates of your square by is going to result in something where that point is still at the origin.
So instead what you do is pop your square up a dimension into 3D. So now you have a unit cube. If you do a shear of the unit cube by 1 in the x direction (which is a 3x3 matrix multiplication), you can take the projection ("shadow") of the top face of the cube to get back into 2D and you'll find it's where you wanted it (moved over by 1).
<meta-point: apologies - my original response seems to have been chopped in half. I didn't mean to submit in this form and I was in meetings etc so it's too old to edit now>
Start with the desire - we want to have an algebra of 2D affine transformations with composition and (usually) inversion.
We can represent this with the trick of "homogeneous coordinates", using 3D vectors with the last entry 1 and 3x3 matrices with the last row [0, 0, 1].
This is convenient because both mathematicians and programmers are familiar with linear transforms and matrices. It's in the comfort zone. There are many libraries.
However, it's wasteful to store all those extra 1's and 0's in memory. You can always replace the matrices with
class Affine2D {
Matrix2x2 linear;
Vector2 shift;
};
and overload all the algebraic operators, including multiplication with 2D vectors.
I'm confused by this. Why use a 3D matrix for a 2D transformation?