CSS function skew()
Опис
skew() - це функція трансформації CSS, яка дозволяє нахилити елемент в обох напрямках, змінюючи його геометричний вигляд та створюючи вигнуту площину нахилу.
Для використання функції skew() вам потрібно передати два аргументи: перше значення вказує нахил в горизонтальному напрямку, а друге - в вертикальному напрямку. Значення angle можуть бути виражені в градусах, радіанах, градах або поворотних точках.
Наприклад, якщо ви хочете нахилити елемент на 30 градусів в горизонтальному напрямку та на -15 градусів в вертикальному напрямку, використовуйте:
.element {
transform: skew(30deg, -15deg);
}
Ця функція дозволяє створювати складні ефекти нахилу для елементів, які додають глибину та динаміку вашим дизайнерським рішенням. Ви можете поєднувати skew() з іншими значеннями трансформації, такими як translate(), rotate() або scale(), щоб створити унікальні трансформації для вашого веб-сайту.
Приклад використання:
/* Нахилити елемент на 45 градусів в обох напрямках */
.example-element {
transform: skew(45deg, 45deg);
}
У даному прикладі елемент з класом "example-element" буде нахилений на 45 градусів в обох напрямках, створюючи динамічну та цікаву форму.
| Порада: | Використовуйте |
| Порада: | При застосуванні |
Синтаксис
skew(<angle>[, <angle>]);<angle>Кут нахилу, виражений у градусах (
deg), радіанах (rad), градах (grad) або поворотних точках (turn).
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
3.5 |
3.1 |
10.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
2 |
18 |
4 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
Наведіть курсор на елемент, щоб побачити зміну нахилу.
Перший елемент залишається без змін, а другий елемент має нахил 30deg.