Обертання Елементів у 2D та 3D

Можна використовувати функцію rotate() для обертання елементів. Додатні значення обертають елемент за годинниковою стрілкою, а від’ємні — проти годинникової стрілки. Кут обертання зазвичай задається у градусах (deg), де значення 0deg означає відсутність обертання. Інші допустимі одиниці для кутів обертання — оберти (turn) і радіани (rad).

Осі елемента

Для розуміння принципу обертання необхідно ознайомитися з поняттям осей елемента. Існує три осі:

• Вісь x — горизонтальна, проходить зліва направо;
• Вісь y — вертикальна, проходить зверху вниз;
• Вісь z — перпендикулярна до екрана, спрямована до глядача.

Напрямок обертання

За замовчуванням властивість rotate() обертає елемент навколо осі z. Однак, можна також застосувати обертання навколо осі x та осі y, використовуючи такі значення:

transform: rotateX(angle);
transform: rotateY(angle);

Приклад 1

Розгляньте наступний приклад коду, де застосовано різні кути обертання для демонстрації обертання навколо осі z:

Приклад 2

У цьому прикладі розглядається обертання навколо осі z, осі x та осі y: