Be able to reflect (flip) an image horizontally or vertically

Topic 12: Images – Reflecting (Flipping) Images

What is Image Reflection?

Think of a mirror 🪞. When you look at yourself, the left side appears on the right side of the reflection. Image reflection in ICT is the same idea – we flip an image so that its left side becomes the right side (horizontal flip) or its top becomes the bottom (vertical flip).

Flipping an Image with CSS

In web pages we can flip images using the CSS transform property. Two simple commands:

• transform: scaleX(-1); – flips horizontally (left ↔ right)
• transform: scaleY(-1); – flips vertically (top ↔ bottom)

Example:

<img src="photo.jpg" style="transform: scaleX(-1);" alt="Horizontally flipped">

Step‑by‑Step Guide

1. Open your HTML file and add an <img> tag.
2. Choose the image you want to flip.
3. Apply style="transform: scaleX(-1);" for a horizontal flip or style="transform: scaleY(-1);" for a vertical flip.
4. Save and refresh the browser to see the change.
5. Optional: add transition to animate the flip.

Exam Tips

Practice Example