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