Preparing the round menu

In this series of assignments, we will build a complex interface element in which transforms play a key role. This is the round menu.

The menu layout is the same as usual. Inside the <nav> tag you will find a regular list <ul> with several list items containing links.

We will demonstrate the approach by adding two menu items, and then we will add the rest of the items in the same way.

We have already prepared the source styles for the list and its items, and we also created an item that marks the center of the menu.

In order to rotate the list items in the menu, you need to position them correctly and set their rotation axis:

• The axis should be in the lower right corner of the list item.
• This angle should coincide with the center of the menu.

Use the transform-origin property as well as the positioning properties to solve this task

By the way, in order to ensure that we have a smooth menu, the menu items should flow slightly beyond the boundaries of the container.