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() з обережністю, оскільки великі значення нахилу можуть вплинути на зрозумілість та доступність контенту.

автор: Bond правити

Порада

При застосуванні skew() до тексту зверніть увагу на збільшення або зменшення розміру контейнера, оскільки текст може витікати або обрізатися.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

skew(<angle>[, <angle>]);

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

<angle>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

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

Переглядач
	1	3.5	3.1	10.5	12	9

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

Переглядач
	2	18	4	3.2

Приклади

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