Cambridge Syllabus Notes

Topic: 12 Images – Rotating an Image 📷

Objective 🎯

Be able to rotate an image by 90°, 180°, or any angle using CSS.

1️⃣ Displaying an Image

Images are added with the <img> tag. Think of it like placing a photo on a digital bulletin board.

<img src="photo.jpg" alt="My photo" width="200">

2️⃣ Rotating an Image with CSS

Use the transform property to turn the image. It’s like spinning a pizza slice on a pizza stone.

Wrap the image in a container (optional but handy).
Add a CSS rule: transform: rotate(90deg); to rotate 90°.
Use transition for a smooth spin.

Example CSS:

img.rotate {
  transform: rotate(90deg);   /* 90°, 180°, 270°, or any angle */
  transition: transform 0.5s ease;
}

3️⃣ Full Example Code

Step	HTML	CSS
1	`<img src="landscape.jpg" alt="Landscape" class="rotate">`	`.rotate { transform: rotate(90deg); }`
2	Add `transition` for smoothness.	`.rotate { transition: transform 0.5s ease; }`

4️⃣ Interactive Demo (JavaScript)

Click the button to rotate the image by 90° each time.

<img id="myImage" src="portrait.jpg" alt="Portrait" width="200">
<button onclick="rotateImage()">Rotate</button>

<script>
  let angle = 0;
  function rotateImage() {
    angle = (angle + 90) % 360;
    document.getElementById('myImage').style.transform = `rotate(${angle}deg)`;
  }
</script>

5️⃣ Exam Tips 🧩

Remember: transform: rotate(90deg); rotates clockwise.
Use deg for degrees, rad for radians.
For smooth animation, add transition: transform 0.5s;.
In the exam, you may need to write the CSS rule only; no need for full HTML.
Check the order of CSS properties – transform should come before transition if both are used.

6️⃣ Quick Recap

To rotate an image:

Use <img> to display.
Apply transform: rotate(angle); in CSS.
Add transition for a smooth spin.
Test with JavaScript if you need interactive rotation.

Practice by rotating different images and experimenting with angles. Happy coding! 🚀

Be able to rotate an image