scale()

Функция scale() в CSS используется для масштабирования (изменения размера) элементов на странице. Это одна из функций трансформации, которая позволяет увеличивать или уменьшать элементы в 2D-пространстве.

Увеличиваем элемент в полтора раза:

        
          
          .element {  transform: scale(1.5);}
          .element {
  transform: scale(1.5);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

x и y — положительные числа, либо значение 0.

Если в функцию передать 0, то элемент визуально исчезнет. 1 соответствует нормальному масштабу. Значения от 0 до 1 — уменьшенный масштаб. Чем больше единицы, тем больше масштаб. Чтобы визуально увеличить элемент в три раза, нужно написать transform: scale(3).

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

📝 Точка трансформации по умолчанию — центр элемента. Можно его изменить с помощью свойства transform-origin.

📝 scale() масштабирует весь элемент, включая содержимое, границы (border), тени (box-shadow) и внутренние отступы (padding).

📝 Не влияет на поток документа: окружающие элементы не сдвигаются.

📝 Единицы измерения — безразмерные коэффициенты (1 = 100%, 1.5 = 150% и так далее).

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

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

Стандартная анимация:

        
          
          .animated-element {  transition: transform 0.3s ease;  transform: scale(1);}.animated-element:hover {  transform: scale(1.1);}
          .animated-element {
  transition: transform 0.3s ease;
  transform: scale(1);
}

.animated-element:hover {
  transform: scale(1.1);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Отключённая анимация с prefers-reduced-motion:

        
          
          @media (prefers-reduced-motion: reduce) {  .animated-element {    transition: none !important;    transform: none !important;  }}
          @media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none !important;
    transform: none !important;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Уважайте системные настройки пользователя.
💡 Предоставляйте альтернативные способы взаимодействия без анимаций. Например, добавьте переключатель анимаций в настройки сайта.
💡 Для важной информации не полагайтесь исключительно на анимационные эффекты.

CSS-функция scaleX() определяет изменение размера элемента по оси x (по горизонтали), scaleY() — изменение размера элемента по оси y (по вертикали), scaleZ() — изменение размера элемента по оси z.

        
          
          .block {  transform: scaleX(0.7);}div {  transform: scaleY(0.2);}.element {  transform: scaleZ(-1.5);}
          .block {
  transform: scaleX(0.7);
}
div {
  transform: scaleY(0.2);
}
.element {
  transform: scaleZ(-1.5);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функция scale3d() в CSS позволяет масштабировать элементы в трёхмерном пространстве по осям x, y и z одновременно.

Синтаксис:

        
          
          .block {  transform: scale3d(sx, sy, sz);}
          .block {
  transform: scale3d(sx, sy, sz);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Где:

• sx: коэффициент масштабирования по оси x (горизонталь);
• sy: коэффициент масштабирования по оси y (вертикаль);
• sz: коэффициент масштабирования по оси z (глубина).

— если одно из значений равно нулю, весь элемент исчезает из виду;
— изменения значения одной из осей влияет на изменение размера вдоль этой оси;
— если все три значения равны, элемент не изменяется;
— по-другому можно записать scale3d() как значения scaleX(), scaleY() и scaleZ().

Такой код:

        
          
          .block {  transform: scale3d(0, 1, 2);}
          .block {
  transform: scale3d(0, 1, 2);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

эквивалентен такому:

        
          
          .block {  transform: scaleX(0);  transform: scaleY(1);  transform: scaleZ(2);}
          .block {
  transform: scaleX(0);
  transform: scaleY(1);
  transform: scaleZ(2);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать