Combining Transformations

In an animated film or a video game, a character rarely makes just one move — it turns, then slides, then flips, each action feeding into the next. That stacking of moves is exactly what combining transformations is about, and it hides a neat surprise.

Do one transformation to a shape. Then do another to the result. Something surprising keeps happening: the combined effect of the two moves can very often be described as a single transformation.

Reflect a shape in one mirror, then reflect it again in a second, parallel mirror — and the shape has simply slid across: two reflections have added up to one translation. Reflect in two mirrors that cross instead, and the shape has turned: two reflections have become one rotation. Combining transformations is a machine for discovering these hidden equivalences — and it is the exact maths behind animation, symmetry, and how a games console moves a character around a screen.

Apply them in order

The golden rule of combining is feed the output of the first into the second. Transform the object to get image 1; then transform image 1 (not the original object) to get image 2. You are building a little chain:

\text{object} \;\xrightarrow{\;A\;}\; \text{image 1} \;\xrightarrow{\;B\;}\; \text{image 2}

Some pairs collapse into one neat move:

two reflections in parallel mirror lines together make a translation — of twice the distance between the lines;
two reflections in intersecting mirror lines together make a rotation about the crossing point — through twice the angle between the lines.

But be careful: the order usually matters. Doing A then B generally lands the shape somewhere different from B then A.

Combining transformations

You can apply transformations one after another to the image of the previous one.
A single equivalent transformation often describes the combined effect.
Two reflections in parallel lines → a translation.
Two reflections in intersecting lines → a rotation about their intersection.
The order generally changes the result.

Worked example 1 — reflect, then translate

Take the triangle with corners (1,1), (3,1) and (1,3). Reflect it in the y-axis, then translate the image by 1 left and 4 down.

Step 1 — reflect in the y-axis, so (x,y)\to(-x,y):

(1,1)\to(-1,1),\quad (3,1)\to(-3,1),\quad (1,3)\to(-1,3)

Step 2 — translate that image by (-1,-4):

(-1,1)\to(-2,-3),\quad (-3,1)\to(-4,-3),\quad (-1,3)\to(-2,-1)

The final triangle sits down in the bottom-left. Notice we transformed the reflected corners in step 2 — never the originals.

Seeing it on a grid

Here is worked example 1 on the grid. Start with the object triangle, reflect it in the y-axis to get image 1, then translate image 1 to get image 2. Step through to watch one transformation follow the other.

Worked example 2 — name a single equivalent transformation

A shape is reflected in the line x=1, and the image is then reflected in the line x=3. Describe the single transformation that has the same effect.

The two mirrors are parallel, so the answer is a translation. Its distance is twice the gap between the lines: the lines are 3-1=2 apart, so the translation is 2\times 2 = 4 to the right (from the first mirror towards the second).

Quick check with the point (0,5): reflecting in x=1 gives (2,5); reflecting that in x=3 gives (4,5) — a move of +4 in x, exactly as promised. And a full description of a translation needs its direction and distance — "4 units right" — not just the word "translation".

Worked example 3 — swap the order, change the answer

Combine A = "reflect in the y-axis" with B = "translate 2 right", using the same object triangle (1,1),(3,1),(1,3).

A then B (reflect, then translate): reflect to (-1,1),(-3,1),(-1,3), then shift right 2 to (1,1),(-1,1),(1,3).

B then A (translate, then reflect): shift right 2 to (3,1),(5,1),(3,3), then reflect to (-3,1),(-5,1),(-3,3).

Two completely different final triangles — one straddling the origin, one out in the top-left. Swapping the order really did change the answer. Step through the figure to see them land apart.

The three mistakes that cost the most marks here:

Order matters — transformations don't generally "commute". Reflect-then-rotate usually gives a different result from rotate-then-reflect. Always apply the moves in the stated sequence, feeding each image into the next.
Transform the image, not the original. The second transformation acts on image 1. Going back to the object's coordinates for step 2 is the classic slip.
Describe the single equivalent transformation fully. "A rotation" is not enough — give the centre, angle and direction (clockwise or anticlockwise); for a translation give the vector; for a reflection give the mirror line.

Combining transformations is the mathematical heart of computer animation, video games and robotics. Every moving character on screen is built from sequences of rotations, reflections and translations, applied strictly in order — turn the arm, then move the hand, then rotate the finger.

Because the order matters, these transformations are stored as matrices, and combining two transformations means multiplying their matrices. Matrix multiplication doesn't commute either — AB \neq BA in general — which is exactly the "order matters" rule showing up again in a new costume. A graphics card does millions of these multiplications every frame.