scale()

scale() (масштабувати) - це функція CSS, що визначає перетворення, яке змінює розмір елемента на двовимірній площині. Оскільки ступінь масштабування визначається вектором [sx, sy], це впливає на вертикальні та горизонтальні розміри. Результат – тип даних <transform-function>.

Спробуйте його в дії

Перетворення масштабування характеризується двовимірним вектором. Його координати визначають ступінь масштабування в кожному напрямку. Якщо обидві координати рівні, масштабування рівномірне (ізотропне), а співвідношення сторін зберігається (це гомотетичне перетворення).

Якщо значення координати знаходиться поза межами діапазону [-1, 1], елемент збільшується відповідно до значення; якщо всередині діапазону - зменшується. Відʼємне значення у цьому вимірі призводить до центрально-симетричного відображення. Значення 1 - ніяк не діє.

[!NOTE] Функція scale() працює лише на площині. Для тривимірного масштабування користуйтеся scale3d().

Синтаксис

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

scale(sx)

scale(sx, sy)

Значення

sx

<number> або <percentage>, що представляє абсцису (горизонталь, x-компоненту) вектора масштабування.

sy

<number> або <percentage>, що представляє ординату (вертикаль, y-компоненту) вектора масштабування. Якщо цей параметр не визначено, то усталене його значення – sx, що дає масштабування зі збереженням співвідношення сторін.

Доступність

Анімації масштабування/збільшення викликають проблеми із доступністю, тому що вони є звичним тригером певних типів труднощів. Якщо потрібно додати такі анімації на свій вебсайт, бажано надати користувачам можливість відключати їх, і краще зразу на рівні цілого сайту.

Також подумайте про можливість використання медійної можливості prefers-reduced-motion: за її допомогою можна написати медіазапит, що вимикатиме анімацію, якщо в налаштуваннях користувача обрано зменшення кількості анімації.

Дізнайтеся більше:

• Тлумачення MDN WCAG, пояснення та рекомендації 2.3
• Тлумачення критерію успіху 2.3.3 | W3C тлумачення WCAG 2.1

Приклади

Масштабування за осями X та Y разом

HTML

<div>Звичайний</div>
<div class="scaled">Масштабований</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Еквівалентно scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

Результат

Масштабування за осями X та Y окремо, а також перенесення початку координат

HTML

<div>Звичайний</div>
<div class="scaled">Масштабований</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /* Еквівалентно scaleX(2) scaleY(0.5) */
  transform-origin: left;
  background-color: pink;
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• transform
• scale
• zoom
• <transform-function>
• scale3d()
• Інші окремі властивості перетворення translate та rotate