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 градусів, що додасть оригінальний та цікавий вигляд вашому контенту.

автор: Bond

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

Синтаксис

skewY(<angle>);

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

<angle>

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

автор: Bond

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

Переглядачі

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

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

Приклади

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

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

автор: Bond

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

автор: Bond

Коментарі

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