Поворот изображения на веб-странице можно с помощью CSS вращать класс, который добавляется к любому <img> тег для поворота изображения.
Поворот изображения с помощью CSS
Код CSS должен включать код преобразований для каждого основного Интернет-сайта. браузер, поэтому изображение поворачивается во всех браузерах.
Ниже приведен пример кода CSS для поворота изображения на 180 градусов..
.rotateimg180 {-webkit-transform: повернуть (180 градусов); -moz-transform: повернуть (180 градусов); -ms-transform: повернуть (180 градусов); -о-преобразование: повернуть (180 градусов); преобразовать: повернуть (180 градусов); }
Приведенный выше код CSS следует добавить в файл таблицы стилей .css, связанный с вашим HTML. Например, если ваш CSS-файл называется site.css и находится в том же каталоге, что и ваш HTML-файл, вы можете включить следующий HTML-код в <голова> элемент:
<ссылка rel=«stylesheet» href=«site.css»>
В качестве альтернативы вы можете включить встроенный код CSS либо в тег стиля появляется перед тегом изображения или в стиль атрибут тега изображения.
После применения кода CSS к вашему файлу .css, таблице стилей или <стиль> теги, вы можете использовать имя класса CSS в любом из ваших тегов изображений.
<img src=»https://www.computerhope.com/logo-200.jpg» ширина=»200″ высота=»200″ class=»повернуть»>
Кончик
Чтобы повернуть изображение на другую меру градусов, измените «180» в коде CSS и <img> пометьте желаемую степень.
Пример повернутого изображения
Ниже приведен пример нашего логотипа с использованием приведенного выше кода CSS. Если ваш браузер поддерживает поворот CSS, логотип должен быть повернут на 180 градусов..