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

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); amplamente disponível.

Chrome 111Edge 111Safari 15.4Firefox 108

Trigonometria em CSS torna layouts circulares e radiais CSS puro: posicione N itens num anel com `cos()`/`sin()` e uma custom property de índice por item.

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: Navegadores sem suporte empilham os itens no centro; raramente relevante hoje.

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

Prompt

Para menus radiais, mostradores de relógio ou layouts em órbita, calcule as posições em CSS: dê a cada item `--i`, derive `--a: calc(var(--i) * 360deg / var(--n))` e translade com `calc(cos(var(--a)) * var(--r))` e `calc(sin(var(--a)) * var(--r))`. Use `sibling-index()` em vez de `--i` inline onde houver suporte (veja fx-034). Sem posicionamento em JS.