0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>That’s all there is to creating a round menu:</p>
1
<p>That’s all there is to creating a round menu:</p>
2
<ol><li>Convert the axis of item rotation into an angle using transform-origin, and align this angle with the center of the menu.</li>
2
<ol><li>Convert the axis of item rotation into an angle using transform-origin, and align this angle with the center of the menu.</li>
3
<li><p>Skew and rotate the menu items using the following formulas:</p>
3
<li><p>Skew and rotate the menu items using the following formulas:</p>
4
[sector angle] = 360° / [number of menu items] [rotation of item n] = (n - 1) * [sector angle] [skew angle] = 90° - [sector angle]</li>
4
[sector angle] = 360° / [number of menu items] [rotation of item n] = (n - 1) * [sector angle] [skew angle] = 90° - [sector angle]</li>
5
<li><p>Let’s “unskew” and expand the contents of the menu items:</p>
5
<li><p>Let’s “unskew” and expand the contents of the menu items:</p>
6
[skew angle of contents] = -1 * [skew angle of item] [rotation angle] = -1 * (90° - ([sector angle] / 2))</li>
6
[skew angle of contents] = -1 * [skew angle of item] [rotation angle] = -1 * (90° - ([sector angle] / 2))</li>
7
<li>Shift the contents of the items to the center of the circle.</li>
7
<li>Shift the contents of the items to the center of the circle.</li>
8
<li>Round out the menu container using border-radius, and trim away anything unnecessary using overflow: hidden.</li>
8
<li>Round out the menu container using border-radius, and trim away anything unnecessary using overflow: hidden.</li>
9
</ol><p>And after you have completed these steps, you can apply additional decorative elements. For example, set different backgrounds for items, a frame for the menu container, and so on.</p>
9
</ol><p>And after you have completed these steps, you can apply additional decorative elements. For example, set different backgrounds for items, a frame for the menu container, and so on.</p>
10
<p>Let’s add a third menu item last, so that we get a semicircle. The angle of rotation of the third menu item will be 120°:</p>
10
<p>Let’s add a third menu item last, so that we get a semicircle. The angle of rotation of the third menu item will be 120°:</p>
11
<p>A series of tasks inspired by the article<a>Building a Circular Navigation with CSS Transforms</a>. These examples have been adapted and simplified for the course.</p>
11
<p>A series of tasks inspired by the article<a>Building a Circular Navigation with CSS Transforms</a>. These examples have been adapted and simplified for the course.</p>