css.in.ua
Підтримати

CSS function scale()

Опис

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

Значення, передане в scale(), може бути додатнім (наприклад, scale(2) збільшить розмір елемента удвічі) або від'ємним (наприклад, scale(-1) переверне елемент горизонтально або вертикально).

Ця функція часто використовується разом з іншими перетвореннями, такими як translate(), rotate() або skew(), щоб створити складніші ефекти перетворення.

Приклад використання:

/* Збільшимо розмір елемента удвічі та перевернемо його горизонтально */
.example-element {
  transform: scale(2, -1);
}

У даному прикладі елемент з класом "example-element" буде збільшений удвічі та перевернутий горизонтально, що створить дзеркальний ефект.

Порада:

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

Щоб змінити масштаб тільки по горизонталі або вертикалі, використовуйте scaleX() або scaleY() замість scale().
Порада:

Комбінуйте scale() з іншими CSS-функціями для перетворення для створення складних анімацій або перетворень елементів.

Синтаксис

scale(<number>);
<number>

Числове значення, яке вказує масштаб, до якого потрібно змінити елемент. Позитивні значення збільшують розмір, а негативні значення - зменшують.

Переглядачі

Переглядач

1

3.5

3.1

10.5

12
Переглядач

2

18

4

3.2

Мобільних переглядачів ще не додано.

Приклади


При наведенні курсору на блок .box, він збільшується в 1,5 рази за допомогою transform: scale(1.5).

Два однакових елементи .box, проте другий має клас .scaled, що використовує transform: scale(1.5) для збільшення його розміру та змінює колір на червоний.

Документи

Зв'язок