В уроках посвящённых трансформации двухмерных объектов мы научились использовать несколько видов трансформации:
translate()
rotate()
scale()
Трансформации трёхмерных объектов не отличаются по своему функционалу. Мы так же можем использовать только эти типы, но для них существует специальный синтаксис. Чтобы браузеру было легче, при трансформации трёхмерных объектов к названию функции дописывается 3d
. Таким образом мы получаем 3 функции для трёхмерных элементов:
translate3d()
— перемещениеrotate3d()
— вращениеscale3d()
— масштабированиеЕдинственная трансформация, которая отсутствует для оси z — skew()
Для корректной демонстрации всех этих трансформаций необходимо иметь настоящий трёхмерный объект, а не только ось z. В качестве каноничного примера используют куб. Для его создания понадобится воспользоваться новым свойством, а именно transform-style
, которое принимает одно из двух значений:
flat
. Значение по умолчанию. Оно говорит о том, что элемент находится в той же плоскости, что и его родитель. Именно так мы видим элементы в большинстве случаев и в предыдущих уроках в частностиpreserve-3d
— элемент как бы находится в своём трёхмерном пространстве, а не в пространстве своего родителя. Это означает, что элементы будут независимы друг друга. Например, они могут проходить сквозь друг другаВначале это может немного запутать, но проще всего взглянуть на оба значения в контексте примера:
В левом примере зелёный блок находится выше красного, это объясняется тем, что элементы находятся в одном двухмерном пространстве и зависят друг от друга. Как бы вы не трансформировали зелёный блок он никак не сможет взаимодействовать с красным блоком, так как находится перед ним.
В правом примере значение preserve-3d
для красного блока создаёт собственный контекст объёмного пространства. Все дочерние элементы не просто существуют рядом друг с другом, а находятся в едином трёхмерном пространстве, что позволяет элементам проходить друг через друга и перемещаться относительно общих осей.
Проще всего думать об этом так, что flat
создаёт единое двухмерное пространство, а preserve-3d
трёхмерное. Это добавляет новые возможности по расположению элементов друг с другом.
Важно: свойство transform-style
устанавливается единожды для родительского элемента. Так как свойство отвечает за создание пространства, то нет смысла в установке свойства дочерним элементам. В примере выше таким блоком стал красный элемент. Так же важно помнить, что речь идёт о прямых потомках. Если добавить новый элемент внутрь зелёного блока, то для него пространство будет определяться значением flat
Теперь настало время узнать, как работают уже знакомые трансформации, но в трёхмерном пространстве. В качестве примера возьмём самый примитивный трёхмерный объект — куб. Все его грани сделаны полупрозрачными, чтобы легче было ориентироваться как он выглядит в пространстве. Сейчас же мы смотрим ровно в его центральную точку передней грани. Это будет начальной позицией при любой трансформации, которую мы сделаем ниже. Вы же можете менять начальную точку используя свойство perspective-origin
— это будет давать чуть другой эффект, так как взгляд будет немного под другим углом, в прямом смысле этого слова.
Для перемещения трёхмерных объектов используются функции:
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()
. В примере ниже были убраны все грани кроме фронтальной и задней, а также куб был немного развернут.
Грани имеют следующие свойства:
.front {
transform: translateZ(150px);
}
.back {
transform: translateZ(-150px);
}
Для достижения эффекта куба фронтальная грань была перемещена по оси z на 150 пикселей ближе к пользователю. Это привело к побочному эффекту: грань теперь имеет размер не 300x300 пикселей, как указано, а 382x382 пикселя. Как можно понять, такие трансформации преобразуют именно размеры элементов, что важно учитывать при встраивании трансформированных объектов в уже готовые шаблоны страниц.
Задняя грань претерпела похожие трансформации: она была отдалена на 150 пикселей назад относительного своего начального месторасположения. Это изменило и изначальный размер самого квадрата. Теперь он имеет размер 250x250 пикселей.
Важно: обратите внимание, что трансформация по одной оси и на одинаковое количество пикселей не привело к тому, что элементы увеличились и уменьшились на одинаковое количество пикселей. Здесь прямая связь от свойства, изначальных размеров, положительности или отрицательности значения, а также значения перспективы. Более полно, со всеми формулами и матрицами описание приведено в официальной спецификации.
Если вы не собираетесь делать свои мультфильмы на CSS, то полностью разбираться в этом не нужно. Главное уловить суть того, как свойства влияют на элементы.
Функции, предоставляемые спецификацией CSS повторяют аналогичные функции для перемещения. Вращение элемента осуществляется с помощью следующих функций:
rotateX()
— вращение по оси xrotateY()
— вращение по оси yrotateZ()
— вращение по оси zrotate3d(x, y, z)
— вращение по осям x, y и zПроще всего увидеть вращение элементов на примере анимации куба. Для каждой оси вынесен отдельный пример
Важно: обратите внимание на то, как элементы выстроены изначально. В примере используется три куба друг под другом и мы их видим так, как это было бы в жизни: у верхнего куба видна нижняя грань, так как он находится выше нашего взгляда, а у нижнего куба мы видим его верхнюю грань. Это происходит из-за того, что перспектива в примере выставлена у общего для всех этих кубов блока. В данном случае перспектива установлена у тега <body>
, поэтому объекты располагаются в единой области относительно друг друга, но на разной высоте
Нет ничего удивительного, что для масштабирования элемента в трёхмерном пространстве используются такие же по замыслу функции, как и в прошлых примерах:
scaleX()
— масштабирование по оси xscaleY()
— масштабирование по оси yscaleZ()
— масштабирование по оси zscale3d(x, y, z)
— масштабирование по осям x, y и zДиапазон значений не отличается от двухмерного пространства — значения от 0 до 1 уменьшают элемент, значения выше 1 увеличивают элемент по одной из оси. Отрицательные значения обеспечат эффект «отзеркаливания» элемента.
Для всех примеров из урока воспользуйтесь различными значениями свойств:
perspective
perspective-origin
Посмотрите, как реагируют трёхмерные объекты на изменения этих свойств вместе с трансформациями. Попробуйте несколько трансформаций. Например, поворот и перемещение. Вы можете использовать эти свойства не только для всего куба, но и для каждой грани в отдельности
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт