scale

Базовая версия 2022

Новое

С августа 2022 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

Свойство scale CSS позволяет задавать преобразования масштабирования индивидуально и независимо от свойства transform. Это лучше соответствует типичному использованию пользовательского интерфейса и позволяет избежать необходимости запоминания точного порядка функций преобразования для указания в значении transform.

Попробовать

Синтаксис

/* Keyword values */
scale: none;

/* Single values */
/* values of more than 1 or 100% make the element grow */
scale: 2;
/* values of less than 1 or 100% make the element shrink */
scale: 50%;

/* Two values */
scale: 2 0.5;

/* Three values */
scale: 200% 50% 200%;

/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;

Значения

Одно значение: Числовое или процентное значение, определяющее коэффициент масштабирования, который будет применяться к элементу по обеим осям X и Y. Эквивалентно функции scale() (масштабирование по 2 осям) с указанием одного значения.
Два значения: Два числовых или процентных значения, определяющие коэффициенты масштабирования по осям X и Y (соответственно) для 2D-масштабирования. Эквивалентно функции scale() (масштабирование по 2 осям) с указанием двух значений.
Три значения: Три числовых или процентных значения, определяющие коэффициенты масштабирования по осям X, Y и Z (соответственно) для 3D-масштабирования. Эквивалентно функции scale3d() (масштабирование по 3 осям).
none: Указывает, что масштабирование не должно применяться.

Формальное определение

Начальное значение	`none`
Применимо к	элементам, допускающим преобразование
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	преобразование
Создаёт контекст наложения	да

Формальный синтаксис

scale = 
  none                              |
  [ <number> | <percentage> ]{1,3}

Примеры

Масштабирование элемента при наведении

Следующий пример демонстрирует, как масштабировать элемент при наведении. Показаны два блока; один с одним значением scale, которое масштабирует элемент по обеим осям. Второй блок имеет два значения scale, которые масштабируют элемент по осям X и Y независимо.

HTML

<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>

CSS

.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}

Результат

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

Спецификация
CSS Transforms Module Level 2 # individual-transforms

Совместимость с браузерами

	Десктоп					Мобильное
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`scale`	104	104	72	90	14.1	104	79	71	14.5	20.0	104
`none`	104	104	72	90	14.1	104	79	71	14.5	20.0	104

См. также

Примечание: skew не является самостоятельной трансформирующей характеристикой.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scale