Как повернуть изображение?

Для поворота изображения применяется свойство transform с функцией rotate(), внутри которой указываем угол поворота. В табл. 1 показаны разные варианты поворота картинки со значением угла.

Табл. 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.

См. также

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 04.01.2019
Редакторы: Влад Мержевич