Чтобы отразить картинку по вертикали или горизонтали с помощью CSS можно использовать свойство transform с функцией scale(), отрицательное значение этой функции (-1) позволяет сделать отражение. Написать код CSS можно так:
- transform: scale(-1, 1) — отражение по горизонтали;
- transform: scale(1, -1) — отражение по вертикали;
- transform: scale(-1, -1) (или просто scale(-1)) — одновременное отражение по горизонтали и вертикали.
Вместо scale() можно использовать отдельные функции scaleX() и scaleY(), они отвечают за масштабирование по соответствующим координатам:
- transform: scaleX(-1) — отражение по горизонтали;
- transform: scaleY(-1) — отражение по вертикали;
- transform: scaleX(-1) scaleY(-1) — одновременное отражение по горизонтали и вертикали.
На данном примере показано как отразить картинку по горизонтали используя transform: scaleX.
Пример
HTML
<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="scaleX"/>
CSS
.scaleX {
transform: scaleX(-1); /* Отражение картинки по горизонтали */
}
На данном примере показано как отразить картинку по вертикали используя transform: scaleY.
Пример
HTML
<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="scaleY"/>
CSS
.scaleX {
transform: scaleY(-1); /* Отражение картинки по вертикали */
}