Как перевернуть элемент CSS

Чтобы перевернуть элемент в CSS, можно использовать свойство transform и его функцию rotate(). Также можно использовать функцию scaleX(), если необходимо перевернуть элемент по горизонтали.

Переворот элемента на 180 градусов:

Используем функцию rotate() и устанавливаем значение аргумента 180deg.

.element {
  transform: rotate(180deg);
}

Переворот элемента по горизонтали:

Используем функцию scaleX(-1).

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

С помощью префикса -webkit- можно сделать этот код совместимым с браузерами, которые не поддерживают новые свойства CSS.

Применение префикса для поддержки устаревших браузеров:

.element {
  -webkit-transform: scaleX(-1); /* для Safari, Chrome, Opera */
  transform: scaleX(-1); /* для Firefox, IE и других браузеров */
}

Кроме того, можно также использовать свойство rotateY() для получения более сложных видов поворота. Обратите внимание, что значения аргументов функций rotate() и rotateY() задаются в градусах, а значение аргумента функции scaleX() — в процентах или числе с плавающей запятой.