Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <ul><li>Перемещение. За это отвечает функция translate()</li>

3 <li>Вращение. Для этого использовалась функция rotate()</li>

4 <li>Масштабирование с использованием функции scale()</li>

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

6 <ul><li>translate3d() - перемещение</li>

7 <li>rotate3d() - вращение</li>

8 <li>scale3d() - масштабирование</li>

9 </ul>Единственная трансформация, которая отсутствует для осиz- skew()

10 <h2>transform-style</h2>

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

12 <ul><li>flat. Значение по умолчанию. Оно говорит о том, что элемент находится в той же плоскости, что и его родитель. Именно так мы видим элементы в большинстве случаев и в предыдущих уроках в частности</li>

13 <li>preserve-3d - элемент как бы находится в своём трехмерном пространстве, а не в пространстве своего родителя. Это означает, что элементы будут независимы друг друга. Например, они могут проходить сквозь друг друга</li>

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

15 <a>https://codepen.io/hexlet/pen/abwPYMr</a>

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

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

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

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

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

21 <a>https://codepen.io/hexlet/pen/mdwYxEL</a>

22 <h2>Перемещение</h2>

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

24 <ul><li>translateX()</li>

25 <li>translateY()</li>

26 <li>translateZ()</li>

27 </ul>и их "старший брат" - translate3d(x, y, z). Оно просто объединяет все три функции для удобства написания. Следующие две записи равнозначны:

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

29 <a>https://codepen.io/hexlet/pen/QWgRZKQ</a>

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

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

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

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

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

35 <h2>Вращение</h2>

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

37 <ul><li>rotateX() - вращение по осиx</li>

38 <li>rotateY() - вращение по осиy</li>

39 <li>rotateZ() - вращение по осиz</li>

40 <li>rotate3d(x, y, z) - вращение по осямx,yиz</li>

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

42 <a>https://codepen.io/hexlet/pen/MWodPdM</a>

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

44 <h2>Масштабирование</h2>

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

46 <ul><li>scaleX() - масштабирование по осиx</li>

47 <li>scaleY() - масштабирование по осиy</li>

48 <li>scaleZ() - масштабирование по осиz</li>

49 <li>scale3d(x, y, z) - масштабирование по осямx,yиz</li>

50 </ul>Диапазон значений не отличается от двухмерного пространства - значения от 0 до 1 уменьшают элемент, значения выше 1 увеличивают элемент по одной из оси. Отрицательные значения обеспечат эффект "отзеркаливания" элемента.

51 <a>https://codepen.io/hexlet/pen/abwrQqW</a>