CSS-функция `scale()`

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

Попробуйте

transform: scale(1);

transform: scale(0.7);

transform: scale(1.3, 0.4);

transform: scale(-0.5, 1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

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

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

Синтаксис

scale(sx)

scale(sx, sy)

Значения

sx

Значение <number> или <percentage>, представляющее абсциссу (горизонтальную координату, компоненту x) вектора масштабирования.

sy Необязательно

Значение <number> или <percentage>, представляющее ординату (вертикальную координату, компоненту y) вектора масштабирования. Если значение не задано, по умолчанию используется sx, что приводит к равномерному масштабированию с сохранением соотношения сторон элемента.

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

<scale()> = 
  scale( [ <number> | <percentage> ]#{1,2} )

Доступность

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

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

Подробнее:

• Пояснения MDN к руководству WCAG 2.3

• [Понимание критерия успеха 2.3.3

  Руководство W3C по пониманию WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)

Примеры

Совместное масштабирование измерений 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;
}

Результат

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

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

См. также

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