3D трансформации. Функции — CSS: Transform (трансформация объектов)

• transform-style
• Перемещение
• Вращение
• Масштабирование

В уроках посвящённых трансформации двухмерных объектов мы научились использовать несколько видов трансформации:

• Перемещение. За это отвечает функция translate()
• Вращение. Для этого использовалась функция rotate()
• Масштабирование с использованием функции scale()

Трансформации трехмерных объектов не отличаются по своему функционалу. Мы так же можем использовать только эти типы, но для них существует специальный синтаксис. Чтобы браузеру было легче, при трансформации трехмерных объектов к названию функции дописывается 3d. Таким образом мы получаем 3 функции для трехмерных элементов:

• translate3d() — перемещение
• rotate3d() — вращение
• scale3d() — масштабирование

Единственная трансформация, которая отсутствует для оси z — skew()

transform-style

Для корректной демонстрации всех этих трансформаций необходимо иметь настоящий трехмерный объект, а не только ось z. В качестве каноничного примера используют куб. Для его создания понадобится воспользоваться новым свойством, а именно transform-style, которое принимает одно из двух значений:

• flat. Значение по умолчанию. Оно говорит о том, что элемент находится в той же плоскости, что и его родитель. Именно так мы видим элементы в большинстве случаев и в предыдущих уроках в частности
• preserve-3d — элемент как бы находится в своём трехмерном пространстве, а не в пространстве своего родителя. Это означает, что элементы будут независимы друг друга. Например, они могут проходить сквозь друг друга

Вначале это может немного запутать, но проще всего взглянуть на оба значения в контексте примера:

https://codepen.io/hexlet/pen/abwPYMr

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

В правом примере значение preserve-3d для красного блока создает собственный контекст объёмного пространства. Все дочерние элементы не просто существуют рядом друг с другом, а находятся в едином трехмерном пространстве, что позволяет элементам проходить друг через друга и перемещаться относительно общих осей.

Проще всего думать об этом так, что flat создает единое двухмерное пространство, а preserve-3d трехмерное. Это добавляет новые возможности по расположению элементов друг с другом.

Важно: свойство transform-style устанавливается единожды для родительского элемента. Так как свойство отвечает за создание пространства, то нет смысла в установке свойства дочерним элементам. В примере выше таким блоком стал красный элемент. Так же важно помнить, что речь идёт о прямых потомках. Если добавить новый элемент внутрь зелёного блока, то для него пространство будет определяться значением flat

Теперь настало время узнать, как работают уже знакомые трансформации, но в трехмерном пространстве. В качестве примера возьмём самый примитивный трехмерный объект — куб. Все его грани сделаны полупрозрачными, чтобы легче было ориентироваться как он выглядит в пространстве. Сейчас же мы смотрим ровно в его центральную точку передней грани. Это будет начальной позицией при любой трансформации, которую мы сделаем ниже. Вы же можете менять начальную точку используя свойство perspective-origin — это будет давать чуть другой эффект, так как взгляд будет немного под другим углом, в прямом смысле этого слова.

https://codepen.io/hexlet/pen/mdwYxEL

Перемещение

Для перемещения трехмерных объектов используются функции:

• translateX()
• translateY()
• translateZ()

и их «старший брат» — translate3d(x, y, z). Оно просто объединяет все три функции для удобства написания. Следующие две записи равнозначны:

.block {
  transform: translateX(10px) translateY(10px) translateZ(10px);
  transform: translate3d(10px, 10px, 10px);
}

Перемещение по координатам x и y достаточно очевидны. А как происходит перемещение по оси z? Браузер, при изменении положения по оси z перемещает элемент ближе или дальше от начального месторасположения. При этом, если элемент перемещается дальше, то он уменьшается, а если перемещается ближе, то увеличивается. Такой эффект можно рассмотреть на самом кубе. Передняя и задняя стенка куба располагаются с использованием функции translateZ(). В примере ниже были убраны все грани кроме фронтальной и задней, а также куб был немного развернут.

https://codepen.io/hexlet/pen/QWgRZKQ

Грани имеют следующие свойства:

.front {
  transform: translateZ(150px);
}

.back {
  transform: translateZ(-150px);
}

Для достижения эффекта куба фронтальная грань была перемещена по оси z на 150 пикселей ближе к пользователю. Это привело к побочному эффекту: грань теперь имеет размер не 300x300 пикселей, как указано, а 382x382 пикселя. Как можно понять, такие трансформации преобразуют именно размеры элементов, что важно учитывать при встраивании трансформированных объектов в уже готовые шаблоны страниц.

Задняя грань претерпела похожие трансформации: она была отдалена на 150 пикселей назад относительно своего начального месторасположения. Это изменило и изначальный размер самого квадрата. Теперь он имеет размер 250x250 пикселей.

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

Если вы не собираетесь делать свои мультфильмы на CSS, то полностью разбираться в этом не нужно. Главное уловить суть того, как свойства влияют на элементы.

Вращение

Функции, предоставляемые спецификацией CSS повторяют аналогичные функции для перемещения. Вращение элемента осуществляется с помощью следующих функций:

• rotateX() — вращение по оси x
• rotateY() — вращение по оси y
• rotateZ() — вращение по оси z
• rotate3d(x, y, z) — вращение по осям x, y и z

Проще всего увидеть вращение элементов на примере анимации куба. Для каждой оси вынесен отдельный пример

https://codepen.io/hexlet/pen/MWodPdM

Важно: обратите внимание на то, как элементы выстроены изначально. В примере используется три куба друг под другом и мы их видим так, как это было бы в жизни: у верхнего куба видна нижняя грань, так как он находится выше нашего взгляда, а у нижнего куба мы видим его верхнюю грань. Это происходит из-за того, что перспектива в примере выставлена у общего для всех этих кубов блока. В данном случае перспектива установлена у тега <body>, поэтому объекты располагаются в единой области относительно друг друга, но на разной высоте

Масштабирование

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

• scaleX() — масштабирование по оси x
• scaleY() — масштабирование по оси y
• scaleZ() — масштабирование по оси z
• scale3d(x, y, z) — масштабирование по осям x, y и z

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

https://codepen.io/hexlet/pen/abwrQqW

Самостоятельная работа

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

• perspective
• perspective-origin

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

Дополнительные материалы

1. Спецификация CSS Transforms Module Level 2