Trigonometric functions: sin(), cos(), tan(), atan2()

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); disponible de forma generalizada.

Chrome 111Edge 111Safari 15.4Firefox 108

La trigonometría en CSS hace que los layouts circulares y radiales sean CSS puro: coloca N elementos en un anillo con `cos()`/`sin()` y una custom property de índice por elemento.

CSS

.fx-019{--n:6;--r:70px;position:relative;width:calc(var(--r)*2 + 40px);aspect-ratio:1;list-style:none;padding:0;margin:0}
.fx-019 li{
  --a:calc(var(--i) * 360deg / var(--n));
  position:absolute;left:50%;top:50%;width:40px;height:40px;display:grid;place-items:center;
  background:#2563eb;color:#fff;border-radius:50%;font-family:system-ui;
  translate:calc(cos(var(--a)) * var(--r) - 50%) calc(sin(var(--a)) * var(--r) - 50%);
}

HTML

<ul class="fx-019">
  <li style="--i:0">1</li><li style="--i:1">2</li><li style="--i:2">3</li><li style="--i:3">4</li><li style="--i:4">5</li><li style="--i:5">6</li>
</ul>

Fallback: Los navegadores sin soporte apilan los elementos en el centro; hoy en día rara vez es relevante.

Fuente: developer.mozilla.org/en-US/docs/Web/CSS/sin

Prompt

Para menús radiales, esferas de reloj o layouts en órbita, calcula las posiciones en CSS: da a cada elemento `--i`, deriva `--a: calc(var(--i) * 360deg / var(--n))` y traslada con `calc(cos(var(--a)) * var(--r))` y `calc(sin(var(--a)) * var(--r))`. Usa `sibling-index()` en vez de `--i` en línea donde esté soportado (ver fx-034). Nada de posicionamiento con JS.