scale()

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Функция scale() CSS функция определяет преобразование, которое изменяет размер элемента на 2D-плоскости. Поскольку масштабирование определяется вектором [sx, sy], оно может изменять горизонтальные и вертикальные размеры с разными коэффициентами. Результат — <transform-function> тип данных.

Попробовать

Это преобразование масштабирования характеризуется двухмерным вектором. Его координаты определяют степень масштабирования по каждому направлению. Если обе координаты равны, масштабирование является равномерным (изотропным) и сохраняет соотношение сторон элемента (это гомотетическое преобразование).

Когда значение координаты выходит за пределы диапазона [-1, 1], элемент увеличивается по этой размерности; когда оно находится внутри, он уменьшается. Отрицательное значение приводит к точечному отражению в этой размерности. Значение 1 не имеет эффекта.

Примечание: Функция scale() масштабирует только в 2D. Для масштабирования в 3D используйте scale3d() вместо этого.

Синтаксис

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

scale(sx)

scale(sx, sy)

Значения

sx: Число или <percentage>, представляющее абсциссу (горизонтальную, x-компоненту) вектора масштабирования.
sy: Число или <percentage>, представляющее ординату (вертикальную, y-компоненту) вектора масштабирования. Если не определено, его значение по умолчанию — sx, что приводит к равномерному масштабированию, сохраняющему соотношение сторон элемента.

Декартовы координаты на ℝ^2	Однородные координаты на ℝℙ^2	Декартовы координаты на ℝ^3	Однородные координаты на ℝℙ^3
$\left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)$	$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[sx 0 0 sy 0 0]`

Доступность

Анимации масштабирования/приближения представляют проблемы для доступности, так как они часто являются триггером определенных видов мигрени. Если вам нужно включать такие анимации на вашем веб-сайте, вы должны предоставить возможность пользователям отключать анимации, предпочтительно на всем сайте.

Также следует использовать медиа-атрибут prefers-reduced-motion — используйте его для создания медиа-запроса, который отключит анимации, если пользователь имеет пониженный уровень анимации в своих системных настройках.

Дополнительная информация:

Примеры

Масштабирование X и Y осей вместе

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

Результат

Масштабирование X и Y осей по отдельности и смещение начала координат

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
  transform-origin: left;
  background-color: pink;
}

Результат

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

Спецификация
CSS Transforms Module Level 1 # funcdef-transform-scale

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

	Рабочие столы					Мобильные устройства
	Хром	Эдж	Файрфокс	Опера	Сафари	Хром для Android	Файрфокс для Android	Опера для Android	Сафари для iOS	Samsung Internet	WebView для Android
`scale`	1	12	3.5	10.5	3.1	18	4	11	3.2	1.0	2

См. также

transform
scale
zoom
<transform-function>
scale3d()
Другие отдельные свойства преобразования translate и rotate

© 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/transform-function/scale