Обертання Елементів у 2D та 3D
Можна використовувати функцію rotate() для обертання елементів. Додатні значення обертають елемент за годинниковою стрілкою, а від’ємні — проти годинникової стрілки. Кут обертання зазвичай задається у градусах (deg), де значення 0deg означає відсутність обертання. Інші допустимі одиниці для кутів обертання — оберти (turn) і радіани (rad).
Осі елемента
Для розуміння принципу обертання необхідно ознайомитися з поняттям осей елемента. Існує три осі:
- Вісь x — горизонтальна, проходить зліва направо;
- Вісь y — вертикальна, проходить зверху вниз;
- Вісь z — перпендикулярна до екрана, спрямована до глядача.
Напрямок обертання
За замовчуванням властивість rotate() обертає елемент навколо осі z. Однак, можна також застосувати обертання навколо осі x та осі y, використовуючи такі значення:
transform: rotateX(angle);
transform: rotateY(angle);
Приклад 1
Розгляньте наступний приклад коду, де застосовано різні кути обертання для демонстрації обертання навколо осі z:
index.html
index.css
Приклад 2
У цьому прикладі розглядається обертання навколо осі z, осі x та осі y:
index.html
index.css
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain the difference between rotating around the x, y, and z axes?
What are some practical uses for rotating elements in CSS?
Can you show more examples of using the rotate() function with different units?
Awesome!
Completion rate improved to 2.04Обертання Елементів у 2D та 3D
Свайпніть щоб показати меню
Можна використовувати функцію rotate() для обертання елементів. Додатні значення обертають елемент за годинниковою стрілкою, а від’ємні — проти годинникової стрілки. Кут обертання зазвичай задається у градусах (deg), де значення 0deg означає відсутність обертання. Інші допустимі одиниці для кутів обертання — оберти (turn) і радіани (rad).
Осі елемента
Для розуміння принципу обертання необхідно ознайомитися з поняттям осей елемента. Існує три осі:
- Вісь x — горизонтальна, проходить зліва направо;
- Вісь y — вертикальна, проходить зверху вниз;
- Вісь z — перпендикулярна до екрана, спрямована до глядача.
Напрямок обертання
За замовчуванням властивість rotate() обертає елемент навколо осі z. Однак, можна також застосувати обертання навколо осі x та осі y, використовуючи такі значення:
transform: rotateX(angle);
transform: rotateY(angle);
Приклад 1
Розгляньте наступний приклад коду, де застосовано різні кути обертання для демонстрації обертання навколо осі z:
index.html
index.css
Приклад 2
У цьому прикладі розглядається обертання навколо осі z, осі x та осі y:
index.html
index.css
Дякуємо за ваш відгук!
