ScaleX, scaleY, scaleZ

Свойство transform в CSS формирует матрицу преобразований, объединяющую перемещение, поворот, наклон и масштабирование. Масштабирование реализуется через компоненты scaleX, scaleY, scaleZ, которые изменяют размер элемента вдоль соответствующих осей.

В контексте Velocity.js трансформации применяются не как строковые значения CSS, а как числовые параметры, которые библиотека интерполирует и собирает в итоговую матрицу matrix() или matrix3d().

Ключевая особенность работы Velocity.js с масштабированием заключается в том, что каждое значение scale является частью единой трансформационной системы. При анимации одного параметра остальные компоненты трансформации сохраняются и пересчитываются, а не перезаписываются.

ScaleX: масштабирование по горизонтальной оси

scaleX управляет изменением ширины элемента относительно его центра трансформации.

Базовое поведение:

  • значение 1 — исходный размер
  • значение больше 1 — увеличение ширины
  • значение от 0 до 1 — сжатие
  • отрицательные значения — зеркальное отражение с масштабированием

В Velocity.js параметр передается как числовое свойство объекта анимации:

$(element).velocity({
  scaleX: 1.5
}, {
  duration: 400,
  easing: "ease-in-out"
});

При выполнении анимации библиотека преобразует значение scaleX в компонент матрицы трансформации, сохраняя текущие значения translate, rotate и других scale-параметров.

Математически scaleX влияет на первую диагональ матрицы преобразования:

| scaleX   0       0   0 |
|   0     scaleY    0   0 |
|   0       0     scaleZ  0 |
|   0       0       0   1 |

ScaleY: вертикальное масштабирование

scaleY изменяет высоту элемента по вертикальной оси. Поведение аналогично scaleX, но применяется к координате Y.

Основные особенности:

  • влияет на визуальную высоту блока
  • сохраняет пропорциональность при комбинировании с scaleX
  • активно используется в интерфейсной анимации раскрытия и сжатия элементов

Пример анимации:

$(element).velocity({
  scaleY: 0.3
}, {
  duration: 300,
  easing: "spring"
});

При комбинированном использовании с scaleX формируется эффект деформации объекта:

$(element).velocity({
  scaleX: 1.2,
  scaleY: 0.8
}, {
  duration: 500
});

Такое сочетание применяется для создания эффекта “нажатия” или “пружинящего сжатия” интерфейсных компонентов.

ScaleZ: глубинное масштабирование в 3D-пространстве

scaleZ относится к трехмерной системе трансформаций и проявляется только при наличии контекста transform-style: preserve-3d или использовании matrix3d.

В отличие от scaleX и scaleY, эффект scaleZ не всегда визуально заметен без перспективы, так как он влияет на глубину объекта в 3D-пространстве.

Условия корректного проявления:

  • наличие perspective у родительского элемента
  • использование 3D-трансформаций (translateZ, rotateX, rotateY)
  • включенный режим transform-style: preserve-3d

Пример:

$(element).velocity({
  scaleZ: 2
}, {
  duration: 600
});

В реальных интерфейсах scaleZ редко используется изолированно и чаще выступает частью scale3d.

Комбинированное 3D масштабирование

Velocity.js поддерживает одновременную работу всех трех осей через единый подход трансформации.

Пример комплексного изменения масштаба:

$(element).velocity({
  scaleX: 1.2,
  scaleY: 1.2,
  scaleZ: 1.5
}, {
  duration: 700,
  easing: "easeOutQuad"
});

Такое поведение приводит к формированию matrix3d, где каждая ось масштабируется независимо.

Внутренне библиотека агрегирует значения в единую трансформационную строку:

transform: matrix3d(...)

Взаимодействие scale с другими transform-параметрами

Масштабирование в Velocity.js никогда не существует изолированно. Оно входит в цепочку трансформаций:

  • translateX / translateY / translateZ
  • rotateX / rotateY / rotateZ
  • skewX / skewY
  • scaleX / scaleY / scaleZ

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

Пример комбинированной анимации:

$(element).velocity({
  translateX: 100,
  rotateZ: 45,
  scaleX: 1.3
}, {
  duration: 800
});

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

Поведение при повторной анимации

Velocity.js хранит текущее состояние трансформаций, что позволяет корректно накладывать новые значения scale поверх уже существующих.

Пример последовательных изменений:

$(element).velocity({ scaleX: 1.5 }, 300);
$(element).velocity({ scaleX: 0.8 }, 300);

Второй вызов не сбрасывает transform полностью, а интерполирует от текущего состояния.

При этом важно учитывать, что частичное обновление scale без указания других transform-параметров приводит к их сохранению без изменений.

Анимация через относительные значения

Velocity.js поддерживает относительные изменения масштаба через выражения "+=" и "-=".

Пример:

$(element).velocity({
  scaleX: "+=0.2",
  scaleY: "-=0.1"
}, {
  duration: 400
});

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

Особенности вычисления и производительность

Масштабирование относится к GPU-ускоряемым операциям при условии, что браузер переносит transform в compositor layer.

Velocity.js оптимизирует применение scale следующим образом:

  • объединяет изменения transform в одну операцию
  • избегает повторного чтения computed style
  • минимизирует reflow при изменении только transform

Наиболее производительным считается использование только transform-свойств без одновременного изменения layout-зависимых параметров (width, height, margin).

Подводные эффекты масштабирования

При работе с scaleX и scaleY возникают характерные особенности:

  • смещение визуального центра при отсутствии transform-origin
  • размытие при дробных значениях в некоторых браузерах
  • искажение текста при сильном масштабировании
  • накопление матричных погрешностей при множественных последовательных анимациях

Управление точкой трансформации критически влияет на поведение масштабирования:

transform-origin: center center;

или

transform-origin: 0 0;

Scale в интерфейсных паттернах Velocity.js

Масштабирование часто используется как базовый строительный блок анимационных паттернов:

Эффект нажатия

$(button).velocity({ scale: 0.95 }, 100)
          .velocity({ scale: 1 }, 100);

Появление элемента через масштаб

$(element).velocity({
  scaleX: 0,
  scaleY: 0,
  opacity: 0
}, 0)
.velocity({
  scaleX: 1,
  scaleY: 1,
  opacity: 1
}, {
  duration: 400
});

Пульсация

$(element).velocity({
  scaleX: 1.2,
  scaleY: 1.2
}, {
  duration: 300,
  loop: true
});

Итоговая модель поведения scaleX, scaleY, scaleZ в Velocity.js

Масштабирование в Velocity.js представляет собой непрерывную интерполяцию числовых коэффициентов, которые интегрируются в матричную модель CSS transform. Каждая ось масштабирования управляет отдельным компонентом матрицы, а итоговое визуальное представление формируется через композицию всех transform-параметров в единую систему преобразований.

Оглавление