Как повернуть изображение с помощью CSS и HTML

Как повернуть изображение с помощью CSS и HTML

Поворот изображения на веб-странице можно с помощью 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 градусов..

Логотип