0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>In this series of assignments, we will build a complex interface element in which transforms play a key role. This is the round menu.</p>
1
<p>In this series of assignments, we will build a complex interface element in which transforms play a key role. This is the round menu.</p>
2
<p>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.</p>
2
<p>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.</p>
3
<p>We will demonstrate the approach by adding two menu items, and then we will add the rest of the items in the same way.</p>
3
<p>We will demonstrate the approach by adding two menu items, and then we will add the rest of the items in the same way.</p>
4
<p>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.</p>
4
<p>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.</p>
5
<p>In order to rotate the list items in the menu, you need to position them correctly and set their rotation axis:</p>
5
<p>In order to rotate the list items in the menu, you need to position them correctly and set their rotation axis:</p>
6
<ul><li>The axis should be in the lower right corner of the list item.</li>
6
<ul><li>The axis should be in the lower right corner of the list item.</li>
7
<li>This angle should coincide with the center of the menu.</li>
7
<li>This angle should coincide with the center of the menu.</li>
8
</ul><p>Use the transform-origin property as well as the positioning properties to solve this task</p>
8
</ul><p>Use the transform-origin property as well as the positioning properties to solve this task</p>
9
<p>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.</p>
9
<p>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.</p>