RotateX, rotateY, rotateZ

rotateX, rotateY и rotateZ в Velocity.js используются для анимации трёхмерных CSS-преобразований элемента через свойство transform. Эти трансформации позволяют управлять поворотом объекта вокруг осей X, Y и Z, создавая эффект глубины и объёма в интерфейсе без использования тяжёлых графических библиотек.

Velocity.js работает поверх CSS-трансформаций, объединяя несколько эффектов в одно свойство transform. Это означает, что при анимации rotateX, rotateY и rotateZ библиотека не изменяет отдельные CSS-поля, а пересчитывает итоговую матрицу преобразования.

Структура вызова:

Velocity(element, {
  rotateX: "45deg",
  rotateY: "30deg",
  rotateZ: "90deg"
}, {
  duration: 1000
});

Каждое значение передаётся в виде строки с единицами измерения (deg, rad, turn), что соответствует стандарту CSS3 Transforms.

rotateX: вращение вокруг горизонтальной оси

rotateX управляет поворотом элемента вокруг оси X, которая проходит слева направо. Визуально это создаёт эффект наклона вперёд или назад.

f(x)=_x

В Velocity.js это используется для создания эффекта «откидывания» или «раскрытия» элементов:

Velocity(element, {
  rotateX: "60deg"
}, {
  duration: 800,
  easing: "ease-out"
});

При положительных значениях элемент визуально «отклоняется назад», при отрицательных — «наклоняется вперёд».

Особенности rotateX

  • Требует наличия перспективы (perspective) для выраженного 3D-эффекта
  • Без перспективы выглядит как плоское искажение
  • Часто комбинируется с opacity для усиления глубины

Пример с перспективой:

.scene {
  perspective: 800px;
}
Velocity(element, {
  rotateX: "75deg"
}, {
  duration: 1200
});

rotateY: вращение вокруг вертикальной оси

rotateY управляет поворотом вокруг вертикальной оси Y. Это наиболее часто используемая 3D-анимация для карточек, панелей и переключателей.

f(y)=_y

Базовый пример:

Velocity(element, {
  rotateY: "180deg"
}, {
  duration: 1000
});

Такой поворот часто применяется для эффекта «переворота карточки».

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

  1. Переворот карточек (front/back)
  2. Анимация боковых панелей
  3. Переходы между состояниями UI

Пример реализации карточки:

$(".card").on("click", function () {
  Velocity($(this), {
    rotateY: "180deg"
  }, {
    duration: 600
  });
});

Поведение при больших углах

  • 0° — исходное состояние
  • 90° — элемент становится ребром
  • 180° — полное зеркальное отражение

Для корректного отображения часто используется:

.card {
  backface-visibility: hidden;
}

rotateZ: плоское вращение элемента

rotateZ управляет вращением вокруг оси Z, перпендикулярной экрану. Это стандартное 2D вращение, визуально воспринимаемое как поворот по кругу.

f(z)=_z

Пример использования:

Velocity(element, {
  rotateZ: "360deg"
}, {
  duration: 1500,
  easing: "linear"
});

Этот тип вращения не требует perspective, так как не создаёт 3D-искажения.

Отличия rotateZ от CSS rotate

Velocity.js позволяет использовать как rotateZ, так и rotate. Эти свойства эквивалентны:

Velocity(element, {
  rotate: "45deg"
});

идентично:

Velocity(element, {
  rotateZ: "45deg"
});

Комбинирование rotateX, rotateY и rotateZ

Сила Velocity.js проявляется при одновременной работе нескольких осей вращения. В этом случае формируется полноценное 3D-преобразование.

Velocity(element, {
  rotateX: "45deg",
  rotateY: "45deg",
  rotateZ: "45deg"
}, {
  duration: 2000
});

Такое сочетание используется для:

  • 3D кубов интерфейса
  • вращающихся панелей
  • сложных микроанимаций интерфейса

Влияние порядка трансформаций

CSS transform-матрица объединяет операции, поэтому порядок имеет значение на уровне интерпретации браузером. Velocity.js автоматически объединяет значения в единую матрицу, минимизируя конфликты.

Перспектива и глубина сцены

Для полноценного восприятия rotateX и rotateY необходимо задавать перспективу.

.container {
  perspective: 1000px;
}

Чем меньше значение perspective, тем сильнее эффект глубины.

Без перспективы:

  • объект выглядит искажённым
  • отсутствует ощущение объёма

С перспективой:

  • появляется реалистичное 3D
  • усиливается параллакс

Управление трансформациями в цепочках Velocity.js

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

Velocity(element, { rotateY: "90deg" }, { duration: 400 })
  .then(() => Velocity(element, { rotateY: "0deg" }, { duration: 400 }));

Такой подход применяется для:

  • интерактивных переключений
  • поэтапных эффектов раскрытия
  • UI-индикаторов состояния

Easing при 3D вращениях

Выбор easing-функции влияет на восприятие вращения:

Velocity(element, {
  rotateX: "180deg"
}, {
  duration: 1200,
  easing: "ease-in-out"
});

Типичные варианты:

  • linear — равномерное вращение
  • ease-in — медленный старт
  • ease-out — плавное завершение
  • ease-in-out — естественная динамика

Синхронизация с другими свойствами

rotateX, rotateY и rotateZ часто комбинируются с:

opacity

Velocity(element, {
  rotateY: "180deg",
  opacity: 0
}, {
  duration: 800
});

scale

Velocity(element, {
  rotateX: "45deg",
  scale: 0.8
}, {
  duration: 1000
});

translate

Velocity(element, {
  rotateZ: "90deg",
  translateX: "100px"
}, {
  duration: 700
});

Такие комбинации формируют сложные интерфейсные переходы.

Аппаратное ускорение и производительность

Velocity.js оптимизирует работу через CSS transform, что автоматически включает GPU-ускорение в большинстве браузеров. Это критично для 3D вращений.

Ключевые факторы производительности:

  • использование transform вместо top/left
  • минимизация перерисовок layout
  • объединение нескольких transform в одну операцию

rotateX и rotateY особенно чувствительны к нагрузке, так как требуют пересчёта перспективной матрицы.

Частые ограничения и поведение браузеров

  • В некоторых браузерах слабая поддержка глубокой перспективы
  • При больших углах возможны артефакты рендеринга
  • При отсутствии transform-style: preserve-3d вложенные элементы теряют глубину

Рекомендуемая настройка:

.element {
  transform-style: preserve-3d;
}

Типовые шаблоны использования

Переворот карточки

Velocity(card, {
  rotateY: "180deg"
}, {
  duration: 600
});

Раскрытие панели

Velocity(panel, {
  rotateX: "90deg",
  opacity: 0
}, {
  duration: 500
});

3D вращающийся объект

Velocity(object, {
  rotateX: "360deg",
  rotateY: "360deg",
  rotateZ: "360deg"
}, {
  duration: 3000,
  easing: "linear"
});

Поведение при повторных анимациях

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

  • возможное накопление очереди
  • необходимость stop: true для прерывания
Velocity(element, "stop");

Velocity(element, {
  rotateY: "90deg"
}, {
  duration: 400
});
Оглавление