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