Как отзеркалить картинку в css

Для отражения элемента в CSS можно использовать свойство transform. Данное свойство имеет различные функции трансформаций и позволяет изменять элементы: вращать, передвигать, наклонять, масштабировать - или комбинировать данные виды трансформаций.

Чтобы отразить элемент необходимо использовать свойство transform с функцией трансформации scale() с отрицательными значениями:

• transform: scale(-1, 1) - отражение по горизонтали
• transform: scale(1, -1) — отражение по вертикали
• transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали

Отзеркалить картинку по горизонтали помогает transform: scaleX(-1):

.mirror {
  transform: scaleX(-1);
}

scaleX(-1) растягивает элемент по горизонтали с коэффициентом −1 — картинка отражается слева направо.

По вертикали

.flip {
  transform: scaleY(-1);
}

Обе оси сразу — то же, что поворот на 180°: transform: scale(-1, -1).

Отражение вместе с другими трансформациями

Все трансформации записывают в одном свойстве, иначе последнее перезапишет предыдущее:

.icon {
  transform: rotate(15deg) scaleX(-1);
}

Отзеркалить фон

transform отражает весь элемент вместе с текстом. Чтобы перевернуть только фоновую картинку, вынесите её в псевдоэлемент:

.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("bg.jpg") center / cover;
  transform: scaleX(-1);
  z-index: -1;
}

Анимация переворота

.flip-on-hover {
  transition: transform 0.3s;
}

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

Для языков с письмом справа налево

Иконки-стрелки отражают только для арабского и иврита:

[dir="rtl"] .arrow {
  transform: scaleX(-1);
}

Трансформации разбирают в курсе «Профессиональная вёрстка».