Transform origin

В системах CSS-трансформаций точка привязки преобразований определяет, вокруг какого места элемента выполняются операции масштабирования, вращения и наклона. В контексте Motion One управление transform-origin играет ключевую роль при построении предсказуемых и визуально корректных анимаций.

По умолчанию трансформации применяются относительно центра элемента, что эквивалентно значению:

transform-origin: 50% 50%;

Однако в реальных интерфейсах центр далеко не всегда является желаемой точкой. Кнопки, карточки, иконки, выпадающие меню и SVG-элементы часто требуют смещения точки трансформации для достижения естественного поведения.

Базовая концепция transform-origin

transform-origin задаёт координаты точки, относительно которой выполняются следующие операции:

  • scale (масштабирование)
  • rotate (вращение)
  • skew (наклон)
  • translate (в некоторых комбинированных сценариях)

Формат задания:

transform-origin: x y;

Дополнительно допускается третье значение для 3D:

transform-origin: x y z;

Типичные значения:

  • center
  • top, bottom, left, right
  • проценты (0%, 50%, 100%)
  • пиксели (20px 10px)

Transform origin в Motion One

В Motion One transform-origin управляется так же, как и любой другой CSS-свойство, но становится частью анимационного контекста. Это означает, что его можно:

  • анимировать во времени
  • комбинировать с transform-анимациями
  • синхронизировать с keyframes
  • изменять в зависимости от состояния

Базовая структура анимации:

import { animate } from "motion";

animate(
  ".box",
  { rotate: 180 },
  { duration: 1 }
);

Если элемент вращается, но точка трансформации не задана, поведение может казаться «плавающим» или неестественным.

Установка transform-origin перед анимацией

Наиболее предсказуемый подход — явно задавать transform-origin до запуска анимации:

import { animate, styler } from "motion";

styler(".box").set({
  transformOrigin: "left top"
});

animate(
  ".box",
  { rotate: 90 },
  { duration: 0.6 }
);

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

Анимация transform-origin как свойства

В Motion One можно анимировать саму точку трансформации, создавая эффект «перетекания центра тяжести»:

import { animate } from "motion";

animate(
  ".card",
  {
    transformOrigin: ["0% 50%", "100% 50%"]
  },
  {
    duration: 1
  }
);

Подобная техника используется для:

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

Комбинация transform-origin и scale

Один из наиболее частых сценариев — масштабирование элементов интерфейса.

Масштаб от центра

transform-origin: center;

Поведение:

  • равномерное увеличение
  • симметричное расширение
animate(
  ".button",
  { scale: 1.2 },
  { duration: 0.3 }
);

Масштаб от угла

transform-origin: 0% 0%;

Поведение:

  • элемент «растёт» из верхнего левого угла
  • сохраняется привязка к сетке интерфейса
styler(".panel").set({
  transformOrigin: "0% 0%"
});

animate(
  ".panel",
  { scale: 1.1 },
  { duration: 0.4 }
);

Transform origin и вращение

Вращение наиболее чувствительно к выбору точки трансформации.

Центр вращения

Подходит для:

  • спиннеров
  • иконок загрузки
  • круглых элементов
animate(
  ".icon",
  { rotate: 360 },
  { duration: 1, repeat: Infinity }
);

Вращение вокруг края

transform-origin: left center;

Используется в:

  • дверных анимациях меню
  • раскрывающихся панелях
  • эффекте «перелистывания»
styler(".menu").set({
  transformOrigin: "left center"
});

animate(
  ".menu",
  { rotateY: 45 },
  { duration: 0.5 }
);

3D-контекст и transform-origin

При работе с 3D трансформациями добавляется ось Z:

transform-origin: 50% 50% 100px;

В Motion One это часто применяется совместно с:

  • rotateX
  • rotateY
  • perspective
animate(
  ".cube",
  {
    rotateY: 180
  },
  {
    duration: 1
  }
);

При неверно заданном origin 3D-объекты теряют ощущение глубины и начинают визуально «ломаться».

Keyframes и transform-origin

В ключевых кадрах можно задавать смену точки трансформации между этапами анимации:

animate(
  ".box",
  {
    transformOrigin: ["0% 0%", "50% 50%", "100% 100%"],
    rotate: [0, 180, 360]
  },
  {
    duration: 2
  }
);

Такой подход позволяет создавать эффекты:

  • «перекатывания» объекта
  • динамического смещения центра массы
  • сложных морфинг-анимаций

SVG и transform-origin

SVG-элементы имеют особенности расчёта координат, и transform-origin часто требует явного задания.

Ключевые подходы:

  • использование viewBox как системы координат
  • применение процентов относительно SVG canvas
  • фиксация origin в пикселях
animate(
  "svg circle",
  {
    scale: 1.5,
    transformOrigin: "50% 50%"
  },
  {
    duration: 0.8
  }
);

Типичные ошибки при работе с transform-origin

1. Отсутствие явного задания origin

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

2. Смешивание процентов и пикселей без системы координат

transform-origin: 10px 50%;

Может давать непредсказуемую визуальную точку.

3. Анимация scale без учета layout

При изменении масштаба без фиксированного origin возможны визуальные «скачки» интерфейса.

Производительность и transform-origin

В Motion One трансформации оптимизируются через использование GPU-ускорения, однако transform-origin влияет на:

  • пересчёт слоёв композиции
  • поведение repaint при изменении origin
  • стабильность анимационных кадров

Наиболее производительный сценарий:

  • фиксированный transform-origin
  • анимация только transform (rotate/scale/translate)
  • отсутствие изменений layout во время анимации

Сравнение с другими анимационными подходами

В отличие от более тяжёлых решений, таких как Framer Motion, Motion One опирается на нативные CSS-трансформации и Web Animations API, что делает поведение transform-origin более прямолинейным и предсказуемым.

Ключевое отличие:

  • Motion One — работа напрямую с CSS свойствами
  • React-обёртки — абстракции над состоянием компонентов

Практические паттерны использования

Раскрытие карточки

  • origin: top center
  • scaleY + opacity

Поворот иконки меню

  • origin: center
  • rotate 0 → 180

Анимация появления панели

  • origin: left center
  • scaleX 0 → 1

Физическое «падение» элемента

  • origin: bottom center
  • rotateX + translateY

Взаимодействие с layout и позиционированием

transform-origin не влияет на поток документа, но влияет на визуальную геометрию. Это создаёт важный принцип:

  • layout остаётся неизменным
  • визуальная модель изменяется независимо

Поэтому при сложных интерфейсах часто используется связка:

  • absolute positioning
  • transform-origin
  • scale/rotate animations

Работа с динамическими значениями

В Motion One возможно вычисление origin на основе размеров элемента:

const rect = document.querySelector(".box").getBoundingClientRect();

animate(
  ".box",
  {
    transformOrigin: `${rect.width / 2}px ${rect.height / 2}px`,
    rotate: 90
  },
  {
    duration: 0.5
  }
);

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

Оглавление