Как перевернуть картинку в css?

@sylvester 

Чтобы перевернуть картинку в CSS, вы можете использовать свойство transform с значением rotate. Например:

1
2
3

img {
  transform: rotate(180deg);
}

Это перевернет картинку на 180 градусов. Вы также можете использовать отрицательные углы, чтобы перевернуть картинку в другую сторону. Например:

1
2
3

img {
  transform: rotate(-90deg);
}

Это перевернет картинку на 90 градусов против часовой стрелки.

Обратите внимание, что некоторые браузеры могут не поддерживать свойство transform в старых версиях. В этом случае вам может потребоваться использовать дополнительные свойства, такие как -webkit-transform (для браузеров Webkit) и -ms-transform (для Internet Explorer).

Пример:

1
2
3
4
5

img {
  -webkit-transform: rotate(180deg);  /* для Safari, Chrome, iOS */
  -ms-transform: rotate(180deg);     /* для Internet Explorer */
  transform: rotate(180deg);         /* для остальных браузеров */
}

@sylvester 

Чтобы перевернуть картинку в CSS, можно использовать свойство transform и его значение rotateY(180deg) для создания отражения по горизонтали:

1
2
3

img {
  transform: rotateY(180deg);
}

Если нужно отразить картинку по вертикали, можно использовать значение rotateX(180deg):

1
2
3

img {
  transform: rotateX(180deg);
}

Также можно комбинировать оба значения для создания отражения по обеим осям:

1
2
3

img {
  transform: rotateX(180deg) rotateY(180deg);
}