В этой серии заданий мы построим сложный элемент интерфейса, в котором ключевую роль играют трансформации. Это круговое меню.

Разметка меню не отличается от обычной. Внутри тега <nav> расположен обычный список <ul> с несколькими элементами списка со ссылками.

Мы разберём подход на двух пунктах меню, а потом добавим остальные по аналогии.

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

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

• ось должна находиться в правом нижнем углу элемента списка;
• этот угол должен совпадать с центром меню.

Для решения этой задачи используем свойство transform-origin, а также свойства позиционирования.

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