Переворот картинок горизонтально и вертикально

В этой статье мы рассмотрим поворот изображений по горизонтали и вертикали с использованием CSS и JavaScript.

Мы можем перевернуть элемент img, используя свойство CSS transform. Мы можем сделать это с помощью преобразований scaleX и scaleY.

CSS код для переворота:

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

В качестве альтернативы вы можете использовать rotateX и rotateY:

img {
    /* flip horizontally */
    transform: rotateY(180deg);
}

img {
    /* flip vertically */
    transform: rotateX(180deg);
}

img {
    /* flip both */
    transform: rotateX(180deg) rotateY(180deg);
}

Кроме того, можно анимировать изображение:

Обратите внимание, что здесь добавлена небольшая перспектива в цепочку трансформации. Без преобразования перспективы анимация rotateY была бы такой же плоской, как анимация scaleX. Я также добавил его в анимацию scaleX, чтобы показать, что это не имеет значения.
 

Как видите, переворачивать изображения не так уж и сложно)