Как отзеркалить картинку css
Перейти к содержимому

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

  • автор:

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

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

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

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

Как отразить изображение?

Для отражения изображения или другого элемента, в том числе текста, применяется свойство transform и функция scale(). Хотя исходно эта функция предназначена для изменения масштаба элемента, отрицательное значение -1 позволяет сделать отражение.

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

Вместо scale() можно использовать отдельные функции scaleX() и scaleY() , они отвечают за масштабирование по соответствующим координатам:

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

В примере 1 добавляется обычное изображение, а затем оно же, но отражённое по вертикали. Для этого к добавляется класс с именем mirrorY , а в нём используется свойство transform с функцией scaleY(-1) .

Пример 1. Отражение фотографии

Спам

Отражение .mirrorY

Результат данного примера показан на рис. 1.

Обычная фотография и фотография, отражённая по вертикали

Рис. 1. Обычная фотография и фотография, отражённая по вертикали

См. также

  • Функция scale()
  • Функция scaleX()
  • Функция scaleY()

Как отразить изображение?

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

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

Есть также отдельные функции scaleX() и scaleY() , они отвечают за масштабирование по соответствующим координатам.

Хотя функция scale() предназначена для изменения масштаба элемента, отрицательное значение также позволяет сделать отражение. В примере 1 добавляется обычное изображение, а затем оно же, но отражённое по вертикали. Для этого к добавляется класс с именем mirrorY .

Пример 1. Отражение фотографии

    Отражение .mirrorY  Спам   

Результат данного примера показан на рис. 1.

Обычная фотография и отражённая по вертикали

Рис. 1. Обычная фотография и фотография, отражённая по вертикали

Как отразить картинку по вертикали и горизонтали CSS

Как отразить картинку по вертикали и горизонтали CSS

Чтобы отразить картинку по вертикали или горизонтали с помощью CSS можно использовать свойство transform с функцией scale(), отрицательное значение этой функции (-1) позволяет сделать отражение. Написать код CSS можно так:

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

Вместо scale() можно использовать отдельные функции scaleX() и scaleY(), они отвечают за масштабирование по соответствующим координатам:

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

На данном примере показано как отразить картинку по горизонтали используя transform: scaleX.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *