0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Now you can calculate the angles of the menu sectors and the reverse angles of the menu items. Let’s use the following formulas:</p>
1
<p>Now you can calculate the angles of the menu sectors and the reverse angles of the menu items. Let’s use the following formulas:</p>
2
[sector angle] = 360° / [number of menu items] [reverse of menu item n] = (n - 1) * [sector angle]<p>Our menu can contain a maximum of 6 menu items. Therefore, we will obtain the following values for it:</p>
2
[sector angle] = 360° / [number of menu items] [reverse of menu item n] = (n - 1) * [sector angle]<p>Our menu can contain a maximum of 6 menu items. Therefore, we will obtain the following values for it:</p>
3
[sector angle] = 360°/6 = 60° [reverse of menu item 1] = (1-1) * 60° = 0° [reverse of menu item 2] = (2-1) * 60° = 60°<p>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°.</p>
3
[sector angle] = 360°/6 = 60° [reverse of menu item 1] = (1-1) * 60° = 0° [reverse of menu item 2] = (2-1) * 60° = 60°<p>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°.</p>
4
<p>In order to fix this, we will skew the menu items using skew. And we calculate the skew angle as follows:</p>
4
<p>In order to fix this, we will skew the menu items using skew. And we calculate the skew angle as follows:</p>
5
[skew angle] = 90° - [sector angle]<p>In our case, we get 30°.</p>
5
[skew angle] = 90° - [sector angle]<p>In our case, we get 30°.</p>
6
<p>In total: the first list item must be skewed 30°, and the second one must be rotated 60° and then skewed 30°.</p>
6
<p>In total: the first list item must be skewed 30°, and the second one must be rotated 60° and then skewed 30°.</p>
7
<p>By the way, you can use two types of notation:</p>
7
<p>By the way, you can use two types of notation:</p>
8
transform: rotate(60deg) skew(30deg); // 1st option transform: skew(30deg) rotate(60deg); // 2nd option<p>Their effect will be different, since the order of the transforms is important. And we need the first option.</p>
8
transform: rotate(60deg) skew(30deg); // 1st option transform: skew(30deg) rotate(60deg); // 2nd option<p>Their effect will be different, since the order of the transforms is important. And we need the first option.</p>