Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Обертання Елементів у 2D та 3D | Трансформація Елементів за Допомогою CSS
Просунуті техніки CSS

bookОбертання Елементів у 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.html

index.css

index.css

copy

Приклад 2

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

index.html

index.html

index.css

index.css

copy
question mark

Які одиниці використовуються для вказівки кута обертання?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 3

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

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

bookОбертання Елементів у 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.html

index.css

index.css

copy

Приклад 2

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

index.html

index.html

index.css

index.css

copy
question mark

Які одиниці використовуються для вказівки кута обертання?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 3
some-alt