Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 МодульCSS Transformдля двумерного пространства предоставляет несколько функций, с помощью которых возможно трансформировать элемент по системе координат:

2 <ul><li>translate() - перемещение объекта по координатамxиy</li>

3 <li>rotate() - поворот объекта относительно его центра</li>

4 <li>scale() - масштабирование объекта</li>

5 <li>skew() - наклон элемента. В двумерном пространстве функция деформирует элемент</li>

6 </ul>В этом курсе будут рассмотрены все эти трансформации и особенности их работы. Не пугайтесь, что в уроках может встречаться математика - для простых трансформаций не нужно быть отличником в геометрии.

7 <h2>Система координат</h2>

8 Ещё в школе нас учили, что в типичной прямоугольной системе координат положительные значения по осиxидут из центра вправо, а положительные значения по осиyиз центра вверх.

9 В браузерах же осьyинвертирована и её положительные значения идут из центра вниз. Это важно запомнить, чтобы не запутаться при перемещении объектов. С этой же особенностью вы могли встретиться при использовании свойства top в курсе<a>CSS: Позиционирование</a>.

10 <h3>Точка отсчёта</h3>

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

12 Любой HTML-объект на странице - прямоугольник, вне зависимости от его внешнего вида. Для примера создадим круг и добавим границу свойством outline, чтобы увидеть реальные границы блока. Точки с координатами(0, 0)находятся в левом верхнем углу элемента.

13 <a>https://codepen.io/hexlet/pen/XWMmqeP</a>

14 <h2>Перемещение объекта</h2>

15 Для перемещения объекта вдоль осей координатxиyиспользуется функция translate() свойства transform. Это сокращение от двух функций:

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

17 <li>translateY()</li>

18 </ul>которые позволяют перемещать объект по осямxиyсоответственно. Синтаксис функции перемещения может иметь разный вид:

19 <ul><li>transform: translate(x, y)</li>

20 <li>transform: translateX(x) translateY(y)</li>

21 </ul>Как видно, свойство transform может принимать одновременно несколько функций. Это пригодится при изучении большего количества доступных функций.

22 <a>https://codepen.io/hexlet/pen/PopPBVY</a>

23 Важно:translate() отсчитывается именно от нулевой точки объекта, а не страницы.

24 Обратите внимание на наложение элементов друг на друга при использовании свойства transform. Элемент с данным свойством будет находится выше по осиz, чем другие элементы при прочих равных условиях.

25 <a>https://codepen.io/hexlet/pen/OJpMRby</a>

26 <h2>Relative VS Translate</h2>

27 В течение урока может не покидать мысль, а зачем использовать функцию translate(), если давно существует относительное позиционирование и свойства top, right, bottom, left?

28 С точки зрения визуального эффекта оба подхода дадут одинаковый результат, но, как обычно, дьявол кроется в деталях. Этих дьяволов два:

29 <ul><li>Использование процентных значений</li>

30 <li>Работа с анимациями</li>

31 </ul>Преимущества использования свойства transform в анимации будет рассмотрено в соответствующем курсе. Если кратко, то браузеры быстрее обрабатывают анимации перемещения с использованием translate(), чем с использованием позиционирования.

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

33 <ul><li>Квадрат с номером 1: translateX(50%)</li>

34 <li>Квадрат с номером 2: left: 50% с относительным позиционированием</li>

35 </ul><a>https://codepen.io/hexlet/pen/qBrbagz</a>

36 При прочих равных, оба квадрата сместились на разное количество пикселей вправо относительно своего первоначального положения. Особенность состоит из системы отсчёта, от которой считаются относительные величины этих двух свойств. Для функции translateX() этой системой является сам объект, а для относительно позиционированного элемента - контейнер, в котором он находится. В данном случае получается, что

37 <ul><li>Квадрат с номером 1 был сдвинут на100px / 2 = 50pxвправо. 100px - это ширина квадрата</li>

38 <li>Квадрат с номером 2 был сдвинут на500px / 2 = 250pxправо. 500px - это ширина контейнера</li>

39 </ul>Такие манипуляции могут применяться при позиционировании элементов внутри страницы. Одна из самых распространённых задач - центрирование модального окна. В курсе про позиционирование уже было похожее<a>испытание</a>. Как известно, сделать аккуратное позиционирование используя только абсолютное позиционирование сложно. Есть десятки способов это сделать, но использование связки абсолютного позиционирования и функции translate() - лучший вариант.

40 <h2>Дополнительное задание</h2>

41 Решите испытание<a>Позиционирование модального окна</a>используя абсолютное позиционирование и функцию translate().