Teoría
Teoría

Menú circular: rotación e inclinación

Ahora podemos calcular los ángulos de los sectores del menú y la rotación de cada opción con estas fórmulas:

[ángulo del sector] = 360° / [cantidad de opciones previstas]
[rotación de la opción n] = (n - 1) * [ángulo del sector]

En este ejemplo, dividiremos el menú en 6 sectores iguales, aunque por ahora solo añadiremos dos opciones. Por eso usamos 6 en el cálculo:

[ángulo del sector] = 360° / 6 = 60°
[rotación de la opción 1] = (1 - 1) * 60° = 0°
[rotación de la opción 2] = (2 - 1) * 60° = 60°

Opciones del menú que se superponen

Usaremos rotate para girar las opciones. Pero la rotación por sí sola no basta: los elementos de la lista se superponen porque su ángulo es mayor que 60°.

Para corregirlo, inclinaremos las opciones con skew. Calculamos el ángulo de inclinación así:

[ángulo de inclinación] = 90° - [ángulo del sector]

En nuestro caso resulta 30°.

Por tanto, inclinaremos el primer elemento de la lista 30°. El segundo se girará 60° y se inclinará 30°.

Podemos escribir las funciones en dos órdenes:

transform: rotate(60deg) skew(30deg); /* Opción 1 */
transform: skew(30deg) rotate(60deg); /* Opción 2 */

Los resultados son diferentes porque el orden de las transformaciones importa. Aquí necesitamos la primera opción.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Menú circular: rotación e inclinación</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="circle-menu"> <div class="center"></div> <ul> <li><a href="#">monitor</a></li> <li><a href="#">apertura</a></li> </ul> </nav> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; } .circle-menu { position: relative; width: 400px; height: 400px; margin: 50px auto; background-color: white; box-shadow: 0 0 3px #cccccc; } .circle-menu ul { position: absolute; width: 300px; height: 300px; margin: 50px; padding: 0; list-style: none; box-shadow: 0 0 0 1px #3498db; } .circle-menu .center { position: absolute; top: 195px; left: 195px; z-index: 1000; border: 5px solid #34495e; border-radius: 50%; box-shadow: 0 0 3px #cccccc; } .circle-menu li { position: absolute; top: -10px; left: -10px; width: 160px; height: 160px; background-color: rgba(145, 145, 145, 0.1); box-shadow: inset 0 0 1px #cccccc; transform-origin: 100% 100%; } .circle-menu li:nth-child(1) { transform: none; } .circle-menu li:nth-child(2) { transform: none; } .circle-menu li a { font-size: 0; }

ObjetivosRealizado

Inclina el primer elemento de la lista 30°.
Gira el segundo elemento de la lista 60° e inclínalo 30°.