Главная » Вебмастеру » Как повернуть изображение?

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

Для поворота изображения применяется свойство 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.

Автор: Влад Мержевич
Источник

Интересные публикации по этой теме: