Interactive online courses HTML Academy
2026-03-09 12:26 Diff
https://htmlacademy.org/courses/dynamic/2d-transforms/round-menu-1

Now you can calculate the angles of the menu sectors and the reverse angles of the menu items. Let’s use the following formulas:

[sector angle] = 360° / [number of menu items] [reverse of menu item n] = (n - 1) * [sector angle]

Our menu can contain a maximum of 6 menu items. Therefore, we will obtain the following values for it:

[sector angle] = 360°/6 = 60° [reverse of menu item 1] = (1-1) * 60° = 0° [reverse of menu item 2] = (2-1) * 60° = 60°

In order to rotate the menu items, we use rotate. But one rotation alone is not enough, since the list items will intersect, because their angle is greater than 60°.

In order to fix this, we will skew the menu items using skew. And we calculate the skew angle as follows:

[skew angle] = 90° - [sector angle]

In our case, we get 30°.

In total: the first list item must be skewed 30°, and the second one must be rotated 60° and then skewed 30°.

By the way, you can use two types of notation:

transform: rotate(60deg) skew(30deg); // 1st option transform: skew(30deg) rotate(60deg); // 2nd option

Their effect will be different, since the order of the transforms is important. And we need the first option.