dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS: поворот картинки

как повернуть картинку с помощью CSS

dr.Brain

время чтения 1 мин.

Photo by Jan Kopřiva on Unsplash

Вы можете повернуть картинку с помощью CSS. Для чего это нужно? Допустим, у Вас есть только одно изображение со стрелкой, и, поворачивая его, можно указать различные направления.

.flip-horizontally {
  transform: scaleX(-1);
}

Теперь одна и та же картинка может указывать в двух (противоположных) направлениях:

Еще больше вариантов можно создать с помощью вращения:

Такой подход применим но только к любмым изображениям, но и, вообще, к любым элементам:

Не забывайте про префиксы для старых версий браузеров:

img {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);

  filter: FlipH;
  -ms-filter: "FlipH";
}

Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.