Vse o WEB
Информация и размышления о Web технологиях

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

В этой статье мы рассмотрим поворот изображений по горизонтали и вертикали с использованием 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);
}

 

original

scaleX(-1)

scaleY(-1)

scaleX(-1,-1)

 

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

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

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

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

 

original

rotateY(180deg)

rotateX(180deg)

rotateX(180deg)
rotateY(180deg)

 

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

 

scaleX

rotateY

 

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

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

Наверх