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

That’s all there is to creating a round menu:

  1. Convert the axis of item rotation into an angle using transform-origin, and align this angle with the center of the menu.

  2. Skew and rotate the menu items using the following formulas:

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

  3. Let’s “unskew” and expand the contents of the menu items:

    [skew angle of contents] = -1 * [skew angle of item] [rotation angle] = -1 * (90° – ([sector angle] / 2))
  4. Shift the contents of the items to the center of the circle.
  5. Round out the menu container using border-radius, and trim away anything unnecessary using overflow: hidden.

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.

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°:

A series of tasks inspired by the article Building a Circular Navigation with CSS Transforms. These examples have been adapted and simplified for the course.