Each vertex of a polygon is transformed separately. Apply the same matrix to all vertices, then join the new vertices in the original order.
1. Why use 3×3 matrices?
Ordinary 2×2 matrices represent linear transformations, but not translations. Homogeneous coordinates allow both linear transformations and translations in a single matrix.
\[\begin{bmatrix}x'\\y'\\1\end{bmatrix}=\begin{bmatrix}a&b&t_x\\c&d&t_y\\0&0&1\end{bmatrix}\begin{bmatrix}x\\y\\1\end{bmatrix}=\begin{bmatrix}ax+by+t_x\\cx+dy+t_y\\1\end{bmatrix}\]
The 2×2 upper-left block controls the linear transformation. The last column controls displacement.
2. Translation
Move each point horizontally by Δx and vertically by Δy. Lengths and angles remain unchanged.
\[T=\begin{bmatrix}1&0&\Delta x\\0&1&\Delta y\\0&0&1\end{bmatrix}\]
Example: Move P(2, 1) by (3, −2).
\[\begin{bmatrix}1&0&3\\0&1&-2\\0&0&1\end{bmatrix}\begin{bmatrix}2\\1\\1\end{bmatrix}=\begin{bmatrix}5\\-1\\1\end{bmatrix}\quad P\prime=(5,-1)\]
3. Stretch (independent x and y factors)
Stretch x by sₓ and y by sᵧ about the origin. If the factors differ, proportions change.
\[S=\begin{bmatrix}s_x&0&0\\0&s_y&0\\0&0&1\end{bmatrix}\]
Example: Stretch P(2, 3) using sₓ = 2, sᵧ = 0.5.
\[\begin{bmatrix}2&0&0\\0&0.5&0\\0&0&1\end{bmatrix}\begin{bmatrix}2\\3\\1\end{bmatrix}=\begin{bmatrix}4\\1.5\\1\end{bmatrix}\quad P\prime=(4,1.5)\]
4. Mirror (reflection)
Across the x-axis
\[R_x=\begin{bmatrix}1&0&0\\0&-1&0\\0&0&1\end{bmatrix}\qquad (x,y)\to(x,-y)\]
Across the y-axis
\[R_y=\begin{bmatrix}-1&0&0\\0&1&0\\0&0&1\end{bmatrix}\qquad (x,y)\to(-x,y)\]
Through the origin
\[R_o=\begin{bmatrix}-1&0&0\\0&-1&0\\0&0&1\end{bmatrix}\qquad (x,y)\to(-x,-y)\]
Example: Reflect P(−3, 2) across the y-axis.
\[\begin{bmatrix}-1&0&0\\0&1&0\\0&0&1\end{bmatrix}\begin{bmatrix}-3\\2\\1\end{bmatrix}=\begin{bmatrix}3\\2\\1\end{bmatrix}\quad P\prime=(3,2)\]
5. Flip — 180° rotation about the origin
In this simulator, “Flip” is defined as a half-turn about the origin. It reverses both coordinates. Unlike a single-axis mirror reflection, a half-turn preserves orientation.
\[F=\begin{bmatrix}-1&0&0\\0&-1&0\\0&0&1\end{bmatrix}\]
Example: Flip P(2, −4).
\[P\prime=(-2,4)\]
Terminology note: Some textbooks use “flip” to mean a reflection instead. Here, the mirror options cover reflections and Flip specifically means a 180° rotation.
6. Scale about any centre — positive and negative
For centre C(cₓ, cᵧ) and factor k, first subtract the centre, multiply by k, and add the centre back:
\[\begin{aligned}P\prime&=C+k(P-C)\\x\prime&=c_x+k(x-c_x)\\y\prime&=c_y+k(y-c_y)\end{aligned}\qquad M=\begin{bmatrix}k&0&(1-k)c_x\\0&k&(1-k)c_y\\0&0&1\end{bmatrix}\]
If k > 0, each image point lies on the same ray from C. If k < 0, it lies on the opposite ray. Distances from C are multiplied by |k|. If k = 0, all vertices collapse to C.
Example A — positive factor: Scale P(3, 2) by k = 2 about C(1, 1).
\[\begin{aligned}x\prime&=1+2(3-1)=5\\y\prime&=1+2(2-1)=3\end{aligned}\qquad M=\begin{bmatrix}2&0&-1\\0&2&-1\\0&0&1\end{bmatrix}\quad P\prime=(5,3)\]
Example B — negative factor: Scale P(0, 2) by k = −4 about C(0, 1).
\[\begin{aligned}x\prime&=0-4(0-0)=0\\y\prime&=1-4(2-1)=-3\end{aligned}\qquad M=\begin{bmatrix}-4&0&0\\0&-4&5\\0&0&1\end{bmatrix}\quad P\prime=(0,-3)\]
When C = (0, 0), the matrix simplifies to diagonal entries k, k, 1. Negative uniform scaling in 2D combines a positive enlargement with a half-turn.
7. Skew (shear)
A horizontal shear shifts x in proportion to y. A vertical shear shifts y in proportion to x. The simulator allows both parameters together.
\[H=\begin{bmatrix}1&h_x&0\\h_y&1&0\\0&0&1\end{bmatrix}\qquad\begin{aligned}x\prime&=x+h_xy\\y\prime&=y+h_yx\end{aligned}\]
Example: Apply horizontal shear hₓ = 1.5 and vertical shear hᵧ = 0 to P(2, 3).
\[\begin{bmatrix}1&1.5&0\\0&1&0\\0&0&1\end{bmatrix}\begin{bmatrix}2\\3\\1\end{bmatrix}=\begin{bmatrix}6.5\\3\\1\end{bmatrix}\quad P\prime=(6.5,3)\]
For a pure horizontal or pure vertical shear, area is preserved. If both shear parameters are nonzero, the determinant is 1 − hₓhᵧ, so area may change.
8. Combining transformations
With column vectors, the rightmost matrix acts first. To scale by 2 about the origin and then translate by (3, 1), calculate T × S:
\[\begin{aligned}T=\begin{bmatrix}1&0&3\\0&1&1\\0&0&1\end{bmatrix}\qquad S=\begin{bmatrix}2&0&0\\0&2&0\\0&0&1\end{bmatrix}\\ T S=\begin{bmatrix}2&0&3\\0&2&1\\0&0&1\end{bmatrix}\\ P=(1,2)\;\Rightarrow\;S(P)=(2,4)\;\Rightarrow\;T(S(P))=(5,5)\end{aligned}\]
Order matters:
S × T would instead give (8, 6) for this point. Matrix multiplication is generally not commutative.
9. Practice: Transform a triangle
Let A(0, 1), B(3, 1), C(1, 4). Translate by (2, −1):
\[A\prime=(2,0),\quad B\prime=(5,0),\quad C\prime=(3,3)\]
Plot these three vertices and join them to see the translated triangle. Try the same triangle in the simulator using translation (2, −1).
← Return to interactive transformation simulator