CSS scale — масштабування елемента без transform

CSS властивість scale масштабує елемент окремою властивістю, без transform.

правити

Загальний опис

Одне значення масштабує рівномірно (scale: 1.2), два — окремо по осях X і Y (scale: 2 1), три — додає ще й вісь Z.

Як і rotate та translate, вона незалежна: анімувати масштаб можна, не чіпаючи поворот і зсув.

правити

Нотатка

Значення менше за 1 зменшує елемент, від'ємне — ще й віддзеркалює його.

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

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

Синтаксис

scale: none | <number>{1,3};

Властивість scale може отримувати 2 значень:

none

Без масштабування.

автор: NagarD

правити

number

Множник: одне значення — обидві осі, два — X та Y, три — X, Y, Z.

автор: NagarD

правити

Переглядачі

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

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

Переглядач
scale	104+	72+	14.1+	90+	104+	-

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

Переглядач
scale	104+	yes	yes	14.5+

Приклади

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

<article class="card">Наведи на мене</article>

.card {
    padding: 2rem;
    background: #f4f4f4;
    scale: 1;
    transition: scale .2s ease-out;
}

.card:hover {
    scale: 1.05;
}