Обертання зображення за допомогою функції rotate() Як випливає з назви, ви можете використовуйте функцію rotate(arg), щоб обертати зображення у двовимірному просторі. Зображення обертається на основі аргументу, переданого цій функції в одиницях, які підтримуються CSS, наприклад, градус, градіан, поворот або радіан.
Ви можете легко повернути зображення на 90 градусів у CSS за допомогою властивості CSS transform. Це так само просто, як зробити це: перетворення: поворот (90 градусів) . Ви обертаєте його в іншому напрямку за допомогою transform: rotate(-90deg) або transform: rotate(270deg) .
CSS rotate() Функція rotate() приймає один аргумент: кут, на який ви хочете повернути веб-елемент. Ви можете обертати елемент за або проти годинникової стрілки. Давайте подивимося на синтаксис функції rotate(): перетворення: поворот (кут);
З будь-якою метою, окрім виправлення орієнтації зображення через спосіб його зйомки чи сканування, використовуйте властивість transform з ключовим словом rotate, щоб вказати обертання. Це включає будь-які керовані користувачем зміни орієнтації зображення або зміни, необхідні для друку в книжковій або альбомній орієнтаціях.
З серпня 2022 року ця функція працює на останніх пристроях і версіях браузера. Ця функція може не працювати в старіших пристроях або браузерах. Властивість CSS rotate дозволяє вказувати трансформації обертання окремо та незалежно від властивості transform.
Відображення зображення за допомогою transform Властивість transform CSS — це потужний інструмент, який дає вам можливість обертати, масштабувати, нахиляти або перекладати елемент <img>. Зокрема, ви можете перевернути зображення за допомогою функцій трансформації scaleX() і scaleY() або за допомогою функцій rotateX() або rotateY().