Урок 68 із 104
65%
← Назад

Скіс елемента по осі в CSS

Вивчаємо функції skewX(), skewY() та skew(), які дозволяють нахиляти елемент по горизонтальній та вертикальній осях.

Що таке skew()

Функції skewX(), skewY() та skew() використовуються разом із властивістю transform для нахилу або скошування елемента.

Кут нахилу задається в градусах (deg). Додатне або від'ємне значення визначає напрямок нахилу.

  • skewX() — нахиляє елемент по горизонтальній осі X.
  • skewY() — нахиляє елемент по вертикальній осі Y.
  • skew() — дозволяє одночасно задати нахил по X та Y.

Нахил по осі X через skewX()

Функція skewX() нахиляє вертикальні сторони елемента, змінюючи його форму відносно горизонтальної осі.

.element { transform: skewX(20deg); }

Нахил по осі Y через skewY()

.element { transform: skewY(15deg); }

Нахил по двох осях через skew()

Функція skew() може приймати одне або два значення. Перше значення задає нахил по X, друге — по Y.

.element { transform: skew(20deg, 10deg); }

Якщо вказати тільки одне значення, воно застосовується до осі X, а нахил по Y буде дорівнювати 0.

.element { transform: skew(20deg); }

Від'ємне значення

.element { transform: skewX(-15deg); }

Скіс при наведенні

.element { transition: transform 0.3s ease; } .element:hover { transform: skewX(10deg); }
❗ Важливо:

Функції skewX(), skewY() та skew() працюють через transform. Для плавної зміни нахилу можна використовувати transition: transform.

Практичне завдання

Практичне завдання 1

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Нахиліть його по осі X на 20 градусів.
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: steelblue; } </style>
💡 Показати підказку

Використайте transform: skewX(20deg).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: steelblue; transform: skewX(20deg); }

Практичне завдання 2

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Нахиліть його по осі Y на 15 градусів.
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: tomato; } </style>
💡 Показати підказку

Використайте transform: skewY(15deg).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: tomato; transform: skewY(15deg); }

Практичне завдання 3

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Нахиліть його на 20 градусів по X та на 10 градусів по Y.
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: seagreen; } </style>
💡 Показати підказку

Використайте transform: skew(20deg, 10deg).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: seagreen; transform: skew(20deg, 10deg); }

Практичне завдання 4

📌 Завдання:
  1. Створіть кнопку.
  2. При наведенні нахиляйте її по осі X на 10 градусів.
  3. Зробіть нахил плавним.
<!-- Початковий код --> <button class="button">Навести курсор</button> <style> .button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; } </style>
💡 Показати підказку

Додайте transition: transform 0.3s ease і використайте skewX(10deg) у стані :hover.

✅ Показати відповідь
.button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; transition: transform 0.3s ease; } .button:hover { transform: skewX(10deg); }