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 градусів, створюючи вигнуту форму елемента.
| Порада: | Використовуйте |
| Порада: | Експериментуйте з різними значеннями |
Синтаксис
skewX(<angle>);<angle>Кут нахилу, виражений у градусах (
deg), радіанах (rad), градах (grad) або поворотних точках (turn).
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
3.5 |
3.1 |
10.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
2 |
18 |
4 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
При наведенні курсору на блок .box, він змінює свій нахил за допомогою transform: skewX(-30deg)
Два елементи .box, проте другий має клас .skewed, який використовує transform: skewX(30deg) для зміни нахилу.