Perspective и 3D трансформации

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

Перспектива задаётся через perspective и влияет на то, как элементы, перемещающиеся по оси Z или вращающиеся в пространстве, будут искажаться относительно точки наблюдения.

.scene {
  perspective: 800px;
}

Чем меньше значение, тем сильнее выражен эффект глубины. Большие значения делают сцену «плоской», приближая поведение к 2D.

В Motion One это свойство чаще всего задаётся через стили контейнера, внутри которого происходят трансформации:

import { animate } from "motion"

animate(
  ".card",
  { rotateY: 180 },
  { duration: 0.8 }
)

Без заданной перспективы вращение будет выглядеть как простое двумерное искажение без ощущения объёма.

Трансформации в трёхмерном пространстве

CSS предоставляет базовый набор 3D-трансформаций, которые Motion One использует напрямую:

  • rotateX
  • rotateY
  • rotateZ
  • translateZ

Каждая из этих операций воздействует на объект в пространстве, а не на плоскости.

animate(
  ".box",
  {
    rotateX: 60,
    rotateY: 30,
    translateZ: 100
  },
  {
    duration: 1
  }
)

Комбинация вращений по нескольким осям создаёт эффект свободного движения объекта в объёме сцены.

Особенно важно учитывать, что translateZ начинает визуально работать только при наличии перспективы у родительского контейнера.

Связь transform-style и Motion One

Для корректного отображения вложенных 3D-элементов необходимо использовать:

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

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

Motion One не переопределяет это поведение, поэтому управление остаётся на стороне CSS.

Анимация глубины через translateZ

Одним из наиболее выразительных приёмов становится управление осью Z. В отличие от привычных X и Y, эта ось создаёт эффект приближения и удаления объекта.

animate(
  ".panel",
  {
    translateZ: [0, 200]
  },
  {
    duration: 1.2,
    easing: "ease-in-out"
  }
)

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

В сочетании с opacity это позволяет создавать эффекты появления из глубины:

animate(
  ".item",
  {
    translateZ: [-150, 0],
    opacity: [0, 1]
  },
  { duration: 0.6 }
)

Управление вращением по нескольким осям

Комбинированные вращения создают наиболее выразительные 3D-анимации. Motion One позволяет задавать значения одновременно для всех осей.

animate(
  ".cube",
  {
    rotateX: 360,
    rotateY: 360
  },
  {
    duration: 2,
    easing: "linear"
  }
)

При линейной анимации получается эффект непрерывного вращения объекта в пространстве.

Важно учитывать порядок визуального восприятия: вращение по X создаёт эффект наклона вперёд-назад, по Y — влево-вправо.

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

Перспектива влияет не только на вращения, но и на масштабирование объектов в пространстве. Элементы, удаляющиеся по оси Z, визуально уменьшаются, создавая эффект глубины сцены.

Контроль перспективы через CSS остаётся базовым способом управления:

.stage {
  perspective: 1200px;
  perspective-origin: center;
}

Смещение perspective-origin позволяет менять точку наблюдения, создавая эффект взгляда сбоку или сверху.

Motion One в этом случае анимирует только трансформации, а восприятие глубины полностью зависит от сцены.

Сложные 3D-композиции

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

  • контейнер задаёт перспективу
  • сцена включает preserve-3d
  • элементы внутри анимируются по осям X, Y, Z

Пример структуры:

<div class="scene">
  <div class="layer">
    <div class="object"></div>
  </div>
</div>
.scene {
  perspective: 900px;
}

.layer {
  transform-style: preserve-3d;
}
animate(
  ".object",
  {
    rotateY: 45,
    translateZ: 80
  },
  { duration: 0.7 }
)

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

Динамическое изменение перспективы

Перспектива может быть анимирована косвенно через изменение CSS-свойств контейнера. Это создаёт эффект «приближения камеры».

animate(
  ".scene",
  {
    transform: ["perspective(600px)", "perspective(1400px)"]
  },
  {
    duration: 1
  }
)

При уменьшении значения сцена становится более драматичной, при увеличении — более нейтральной и «плоской».

Хотя Motion One работает с transform как строкой, такой подход позволяет эмулировать движение виртуальной камеры.

Оптимизация 3D-анимаций

3D-трансформации являются более ресурсоёмкими, чем 2D-анимации, поэтому важна оптимизация:

  • использование will-change: transform
  • минимизация одновременных анимаций большого числа элементов
  • избегание постоянного изменения перспективы без необходимости
.card {
  will-change: transform;
}

Motion One использует requestAnimationFrame, что снижает нагрузку, но сложные сцены всё равно требуют аккуратного подхода.

Взаимодействие 3D и пользовательского ввода

3D-трансформации часто связываются с курсором или жестами, создавая эффект интерактивной сцены.

animate(
  ".card",
  (progress) => ({
    rotateY: progress * 180
  }),
  { duration: 1 }
)

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

Ограничения и особенности восприятия

3D в вебе остаётся визуальной иллюзией, построенной на 2D-рендеринге. Даже при использовании Motion One поведение зависит от браузерного движка.

Основные ограничения:

  • отсутствие настоящего параллакса света
  • зависимость от GPU-ускорения
  • различия в рендеринге между браузерами
  • ограниченная точность глубинных эффектов

Несмотря на это, сочетание perspective, translateZ и вращений позволяет создавать визуально сложные сцены, которые воспринимаются как полноценное 3D-пространство.

Оглавление