Как перевернуть картинку в CSS

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

Перевернуть картинку по горизонтали (отразить слева направо):

img {
   transform: scaleX(-1);
}

Перевернуть картинку по вертикали (отразить сверху вниз):

img {
   transform: scaleY(-1);
}

Если необходимо перевернуть картинку и по горизонтали, и по вертикали, нужно использовать комбинированную функцию scale:

img {
   transform: scale(-1, -1);
}

Также можно задать значение rotateY(180deg) или rotateX(180deg), чтобы перевернуть изображение по горизонтали или вертикали соответственно.

img {
   transform: rotateY(180deg); /* перевернуть по горизонтали */
   transform: rotateX(180deg); /* перевернуть по вертикали */
}

Обратите внимание, что при использовании transform нужно быть осторожным с расположением других элементов на странице. Изменения, внесенные с помощью transform, могут влиять на положение и размеры других элементов. Если необходимо перевернуть изображение, не забывайте проверять его расположение и размеры относительно других элементов на странице.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как перевернуть картинку в CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали