css.in.ua
Підтримати

CSS function rotateY()

Опис

rotateY() - це функція в CSS, яка дозволяє обертати елемент навколо вертикальної осі Y. Це означає, що елемент обертається у вертикальній площині, яка проходить через центр елемента. Використання цієї функції дозволяє створювати цікаві анімації та ефекти на сторінці.

Приклад використання:

Нехай у нас є такий HTML-код:

<div class="box">Це елемент, який потрібно обертати навколо вертикальної осі Y.</div>

Щоб обернути елемент на 45 градусів вправо навколо вертикальної осі Y, використовуйте такий CSS:

.box {
  transform: rotateY(45deg);
}

Цей код здійснює обертання елемента на 45 градусів вправо навколо вертикальної осі Y.

Порада:

Функцію rotateY() можна комбінувати з іншими CSS-функціями, такими як translate(), scale() або rotateX(), для створення складних ефектів обертання та трансформації.
Порада:

Враховуйте, що обертання за допомогою функції rotateY() впливає на видимість та розташування елементів, зокрема на їхню ширину та висоту.
Порада:

Використовуйте режим прозорості (opacity) або перекриття (z-index) для управління видимістю та позиціонуванням обернених елементів.
Порада:

Функція rotateY() дозволяє створювати різні ефекти, змінюючи положення та орієнтацію елемента на сторінці. Завдяки цій функції можна додавати динамічність та рух до дизайну, що зробить ваші веб-сайти та додатки більш привабливими та захоплюючими для користувачів.

Синтаксис

transform: rotateY(<value>);
<deg>

Значення кута може бути вказане в градусах (deg)

<rad>

Значення кута можуть бути вказані в радіанах (rad)

<turn>

Значення кута можуть бути вказані в повних обертах (turn)

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

Мобільних переглядачів ще не додано.

Приклади


При наведенні курсору на блок, він повертається на 180 градусів навколо вертикальної осі Y.

Блок повертається на 45 градусів навколо вертикальної осі Y.

Документи

Зв'язок