Для повороту зображення застосовується властивість transform з функцією rotate(), всередині якої вказуємо кут повороту. У табл. 1 показані різні варіанти повороту картинки зі значенням кута.
 | | |  |
| Початкове зображення | rotate(90deg) | rotate(180deg) | rotate(-90deg) |
У прикладі 1 показано додавання картинки зі стрілкою та її поворот на 180 градусів.
Приклад 1. Використання transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Поворот картинки</title> <style> .img-right { transform: rotate(180deg); }
</style>
</head>
<body> <img src="image/arrow.png" alt="" class="img-right"> <img src="image/arrow.png" alt="">
</body>
</html>Результат цього прикладу показаний на рис. 1. Використовується клас img-right, який розгортає картинку на 180 градусів, за рахунок чого стрілка вказує вліво.
Мал. 1. Поворот стрілки
Повороти зображення на різні кути та дзеркальне відображення дозволяють отримати різні картинки без створення їх у графічному редакторі, лише засобами CSS.