Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Вращение объекта на странице - без преувеличения одна из самых полезных функций при разработке анимаций и не только. Этот эффект, будучи простым в понимании, содержит некоторые хитрости, о которых не стоит забывать во время разработки шаблона.

2 Вращение объекта достигается путём использования функции rotate() свойства transform. В отличие от функции перемещения, вращение не может быть описано пикселями, процентами и другими привычными единицами измерения. Для вращения объекта используются специальные "угловые" единицы, среди которых:

3 <ul><li>deg - Градусы. Знакомая многим единица измерения, по которой можно указать, на какой угол повернуть объект относительно его начального положения.</li>

4 <li>grad - Градианы. Отличительной особенностью такой единицы является количество град на один квадрант - 100. То есть полный круг описывается в 400 град.</li>

5 <li>rad - Радианы. Мера, при которой за одну единицу принимается угол дуги, длина которой равна радиусу окружности.</li>

6 <li>turn - Оборот. Количество оборотов окружности, где единица равна одному полному обороту.</li>

7 </ul>Не пугайтесь этих единиц, если вы с ними не знакомы. Для большинства действий нет необходимости использовать их все, при этом в каждой единице есть свои плюсы, которые помогут выразительнее использовать функцию rotate(). Для удобства, в этом курсе мы будем использовать только привычные градусы.

8 Важно:для вращения объекта по часовой стрелке используются положительные значения функции rotate()

9 <a>https://codepen.io/hexlet/pen/PopZRYa</a>

10 Взгляните на наложение элементов. Изменив положение в пространстве, они не стали занимать "особое" положение в потоке документов. Для потока с этими элементами ничего и не случалось. То место, в котором они находились до трансформации всё так же зарезервировано и не занимается другими элементами. Это же пространство так же не изменяется вне зависимости от значений свойства transform. Такое поведение обеспечивает корректность отображения страницы браузерами на случай, если они не поддерживают свойство transform.

11 Как и с перемещением, функция rotate() не является единственной функцией для поворота элемента. Существует еще несколько:

12 <ul><li>rotateX()</li>

13 <li>rotateY()</li>

14 <li>rotateZ()</li>

15 </ul>Про rotateZ() и похожие функции будет подробнее рассказано в темах, посвящённых 3D трансформациям. Работа двух других функций в двумерной области может поначалу запутать. Как это вращать объект только по одной оси? Ответ на этот вопрос будет ближе к концу урока. А сейчас стоит понять, как именно вращаются элементы и можно ли управлять точкой, вокруг которой и произойдёт вращение.

16 <h2>Точка вращения</h2>

17 Если вы попробуете вращать любой HTML-элемент на странице, то cможете заметить, что браузер за точку вращения устанавливает центр элемента. Именно вокруг этой точки и происходит всё вращение. Это позволяет не выходить объекту за пределы своего изначального положения и является самым интуитивным способом. Скорее всего, мысленно, вы сможете перевернуть объект на 90 градусов по часовой стрелке и, еще до трансформации, определить конечный результат преобразования.

18 В следующих примерах ось вращения будет обозначена тёмной точкой в квадрате. Следите за тем, как вращается элемент, но не поддавайтесь гипнозу :)

19 <a>https://codepen.io/hexlet/pen/QWpGpqR</a>

20 Используя CSS мы можем произвольно изменять точку, вокруг которой будет происходить вращение. Для этого используется свойство transform-origin, оно может принимать от одного до трёх значений одновременно. Третье значение отвечает за осьz, и к ней мы вернёмся во время изучения 3D трансформаций. Поведение при указании одного или двух значений следующее:

21 <ul><li>Одно значение: устанавливается точка по осиx. Значение по осиyбудет равнятьсяcenter</li>

22 <li>Два значения: устанавливаются точки по осиxи по осиy</li>

23 </ul>В качестве значений могут выступать проценты или специальные ключевые словаtop,right,bottom,left,center. Добавим для квадрата из примера выше в качестве точки вращения левый верхний угол. Этого можно добиться двумя способами:

24 <ul><li>transform-origin: left top</li>

25 <li>transform-origin: 0% 0%</li>

26 </ul><a>https://codepen.io/hexlet/pen/ZEeBKOe</a>

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

28 <a>https://codepen.io/hexlet/pen/BaWQwro</a>

29 Обратите внимание на последний пример. В нём точка вращения вынесена за пределы самого объекта. Таким образом создается эффект, что объект перемещается не по определённой точке вращения, а вокруг неё. Попробуйте изменять значения, чтобы убедиться в понимании точки вращения объекта.

30 <h2>Вращение по одной оси</h2>

31 В самом начале урока говорилось о том, что существуют еще две функции для вращения 2D объектов:

32 <ul><li>rotateX()</li>

33 <li>rotateY()</li>

34 </ul>Как можно вращать двумерный объект по одной из осей? Добавим вращение по осиxна 360 градусов c точкой вращения по центру

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

36 Для большей наглядности на объекте используется градиент. Во время изучения трехмерных объектов станет понятнее, что происходит с двумерным объектом. Он действительно крутится только по одной оси. В данном случае наклоняясь вперёд и проходя под осьюx. Это похоже на качели, которые раскручивают "солнышком", только мы не видим глубину объекта. Вращение по осиyработает по тому же принципу, только визуально объект будет вращаться вокруг вертикальной оси.

37 У двумерных объектов нет глубины, и именно поэтому визуально происходит скорее деформация объекта, чем его вращение. Такой принцип можно использовать при создании небольших анимаций. Например, используя :hover на кнопке можно изменить угол её положения относительно пользователя. Похожим приёмом можно добиться эффекта трехмерности в двумерной плоскости. Подробнее об анимации будет в следующих курсах, но этот пример уже можно взять на вооружение для создания простых анимаций интерфейсов.

38 <a>https://codepen.io/hexlet/pen/wvJoPqq</a>

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

40 Используя последний пример с кнопкой, попробуйте изученные свойства трансформации, чтобы увидеть, как будет вести себя объект при наведении. Скорость трансформации можно изменить в свойстве transition.

41 <h2>Полезные ссылки</h2>

42 <ul><li><a>Единица градус</a></li>

43 <li><a>Единица град</a></li>

44 <li><a>Единица радиан</a></li>

45 </ul>