scale

Определение и применение

Свойство scale увеличивает, уменьшает или отражает отрисованный элемент. Оно задаёт масштаб независимо от отдельных свойств сдвига и поворота и подходит, например, для небольшого увеличения карточки.

Как масштабирование меняет вид элемента и сочетается с другими преобразованиями — в уроке «Трансформация элементов. Часть 1: двухмерные преобразования».

Попробуйте значения scale

Сравните равномерное масштабирование и разные масштабы по осям. Пунктир показывает исходный размер.

Значение свойства

scale: none

HTML и CSS примера
HTML
<div class="stage">
  <div class="reference">
    <div class="demo-target" style="transform-origin: center">Тони →</div>
  </div>
  <p>Место в потоке сохранено</p>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  padding: 35px 20px;
}
.reference {
  width: 140px;
  height: 80px;
  margin: 25px auto;
  border: 2px dashed #52697d;
}
.demo-target {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #9bd3ec;
  border: 2px solid #245a85;
  scale: none;
}
p {
  font-size: 13px;
  margin-top: 42px;
}

Поддержка браузерами

Спецификация: CSS transforms-2

Поддерживается во всех основных браузерах с 2023 года.

Показать браузеры
Совместимостьcss.properties.scale
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
scale✓104✓104✓72✓90✓14.1✓104✓79✓71✓14.5✓20.0✓104✓14.5
none✓104✓104✓72✓90✓14.1✓104✓79✓71✓14.5✓20.0✓104✓14.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
scale: none | [ <number> | <percentage> ]{1,3};

/* Глобальные значения */
scale: initial | inherit | unset | revert | revert-layer;

| разделяет варианты, {1,3} означает от одного до трёх значений. Число 1 и процент 100% означают исходный масштаб. Значения задают оси X, Y и Z.

JavaScript синтаксис:

JavaScript
element.style.scale = "1.2";

Начальное значение свойства

none.

Значения свойства

Значения scale
Значение Описание
none Отдельный масштаб отсутствует. В отличие от 1, само значение не создаёт контекст наложения. Начальное значение.
<number>, <percentage> Один коэффициент применяется к X и Y; Z остаётся равным 1. 1.2 увеличивает на 20%, 0.5 уменьшает вдвое.
Два или три коэффициента Два независимо задают X и Y; третий — Z. Отрицательный коэффициент отражает по оси, нулевой сжимает её до нуля.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства scale устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Как свойство сочетается с другими преобразованиями

Масштаб применяется относительно transform-origin, обычно центра. Для отражения по горизонтали используйте scale: -1 1, а не одно -1, которое изменит обе плоские оси. Свойство меняет видимый размер вместе с текстом и рамкой, но не пересчитывает размеры соседних элементов.

Браузер применяет отдельные свойства в фиксированном порядке: translate, затем rotate, затем scale, после них — список transform. Порядок строк в CSS этот порядок не меняет. Если нужны другие последовательности, используйте функции в transform или вложенные элементы.

Любое значение кроме none, даже визуально нейтральное, создаёт контекст наложения и содержащий блок для позиционированных потомков. Преобразование не действует на обычный незаменяемый строчный элемент: для короткой плашки можно задать display: inline-block.

Спецификация

CSS Transforms — scale.

Наследуется

Нет.

Анимируемое

Да, как преобразование масштаба. При интерполяции none соответствует нейтральному масштабу.

Примеры, попробуйте сами

Видимый размер и место в раскладке

Сравните 1.2, 0.7 и -1 1. Затем задайте scale: 1.5 1: горизонтальное растяжение изменит пропорции текста, но не размер места, выделенного в потоке.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.frame {
    width: 180px;
    height: 120px;
    margin: 48px;
    border: 2px dashed #64748b;
}
.sample {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #bfdbfe;
    border: 2px solid #2563eb;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Видимый размер и место в раскладке</title>
  </head>
  <body>
    <div class="frame"><div class="sample">Тони</div></div>
    <p>Следующий абзац остаётся на своём месте.</p>
  </body>
</html>
style.css
CSS
.sample {
    scale: 1.2;
}