Урок 67 із 104
64%
← Назад

Масштабування елемента в CSS

Вивчаємо функції scaleX(), scaleY() та scale(), які дозволяють змінювати масштаб елемента по горизонталі, вертикалі або одночасно в обох напрямках.

Що таке масштабування

Масштабування дозволяє збільшувати або зменшувати розміри елемента за допомогою властивості transform.

Для масштабування використовують функції scaleX(), scaleY() та scale(). Значення більше 1 збільшує елемент, значення від 0 до 1 зменшує його.

  • scaleX() — змінює масштаб елемента по горизонталі.
  • scaleY() — змінює масштаб елемента по вертикалі.
  • scale() — змінює масштаб по горизонталі та вертикалі.

Масштабування по горизонталі через scaleX()

Функція scaleX() змінює ширину елемента візуально, не змінюючи його фактичне значення width.

.element { transform: scaleX(2); }

Масштабування по вертикалі через scaleY()

.element { transform: scaleY(1.5); }

Масштабування через scale()

Функція scale() може приймати одне або два значення. Одне значення застосовується одночасно по горизонталі та вертикалі. Два значення дозволяють окремо задати масштаб по X та Y.

.element { transform: scale(1.5); }
.element { transform: scale(2, 0.5); }

Зменшення елемента

.element { transform: scale(0.7); }

Масштабування при наведенні

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

Функції scaleX(), scaleY() та scale() працюють через transform. Для плавного масштабування при зміні стану елемента використовуйте transition: transform.

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

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

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

Використайте transform: scaleX(2).

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

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

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

Використайте transform: scaleY(1.5).

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

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

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

Використайте transform: scale(1.2).

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

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

📌 Завдання:
  1. Створіть кнопку.
  2. При наведенні збільшуйте її в 1,1 раза.
  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 і використайте scale(1.1) у стані :hover.

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