CSS scale() — масштабування елемента

Опис

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

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

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

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

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

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

правити

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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

scale(<number>);

Функція scale може отримувати єдине значення:

<number>

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	3.5	3.1	10.5	12

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

Переглядач
	2	18	4	3.2

Приклади

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

<div id="description">
  <h2>Приклад 2</h2>
  <p>Один з елементів має змінений масштаб.</p>
</div>

<div id="result">
  <div class="box"></div>
  <div class="box scaled"></div>
</div>

#description {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin-right: 20px;
}

.box.scaled {
  transform: scale(1.5);
  background-color: red;
}

<div id="description">
  <h2>Приклад 1</h2>
  <p>Наведіть курсор на елемент, щоб побачити зміну масштабу.</p>
</div>

<div id="result">
  <div class="box"></div>
</div>

#description {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.5);
}

<div class="row">
    <div class="box">звичайний</div>
    <div class="box big">scale(1.4)</div>
    <div class="box mirror">scale(-1, 1)</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 50px 24px;
}

.row {
    display: flex;
    gap: 20px;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 80px;
    border-radius: 6px;
    background: #cfd8e3;
    color: #17202a;
}

.big {
    background: #2f6f9f;
    color: #fff;
    transform: scale(1.4);
}

.mirror {
    background: #2f7d4f;
    color: #fff;
    transform: scale(-1, 1);
}