CSS function skewX

Опис

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

Для застосування функції skewX() потрібно вказати один аргумент - angle, який визначає величину нахилу в градусах, радіанах, градах або поворотних точках. Позитивні значення нахилюють елемент вправо, негативні - вліво.

Наприклад, якщо ви хочете нахилити елемент вправо на 30 градусів, використайте:

.element {
  transform: skewX(30deg);
}

Ця функція дозволяє створювати ефектні нахилові перетворення для ваших елементів. Ви можете комбінувати skewX() з іншими значеннями трансформації, такими як translate(), rotate() або scale(), щоб створити складні та захоплюючі ефекти на вашій веб-сторінці.

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

/* Нахилити елемент вліво на 45 градусів */
.example-element {
  transform: skewX(-45deg);
}

У даному прикладі елемент з класом "example-element" буде нахилено вліво на 45 градусів, створюючи вигнуту форму елемента.

автор: Bond

Порада: Використовуйте skewX() з обережністю, оскільки великі значення нахилу можуть впливати на читабельність тексту та зовнішній вигляд елементів.
автор: Bond
Порада: Експериментуйте з різними значеннями angle, щоб створити цікаві нахилові ефекти та перетворення.
автор: Bond

Синтаксис

skewX(<angle>);

Функція skewX може отримувати єдине значення:

<angle>

Кут нахилу, виражений у градусах (deg), радіанах (rad), градах (grad) або поворотних точках (turn).

автор: Bond

Значення без задання:	none

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	3.5	3.1	10.5	12

Підтримка: мобільні переглядачі
Переглядач
	2	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

При наведенні курсору на блок .box, він змінює свій нахил за допомогою transform: skewX(-30deg)

автор: Bond

Два елементи .box, проте другий має клас .skewed, який використовує transform: skewX(30deg) для зміни нахилу.

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!