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

CSS function rotateX()

Опис

rotateX() - це функція в CSS, яка дозволяє обертати елемент навколо горизонтальної осі X. Вона приймає один параметр - кут обертання елемента. За замовчуванням, 0 градусів означає відсутність обертання.

Ця функція дозволяє створювати захоплюючі ефекти та анімації на вашому веб-сайті. Ви можете обертати елемент вперед або назад навколо горизонтальної осі, змінюючи його орієнтацію та положення на сторінці.

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

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

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

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

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

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

Порада:

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

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

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

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

Синтаксис

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

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

<rad>

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

<turn>

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

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

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

Приклади


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

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

Спільнота

Зв'язок