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

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); breit verfügbar.

Chrome 111Edge 111Safari 15.4Firefox 108

Trigonometrie in CSS macht kreisförmige und radiale Layouts zu reinem CSS: platziere N Elemente auf einem Ring mit `cos()`/`sin()` und einer Index-Custom-Property pro Element.

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: Browser ohne Unterstützung stapeln die Elemente in der Mitte; heute selten relevant.

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

Prompt

Berechne für radiale Menüs, Ziffernblätter oder Orbit-Layouts die Positionen in CSS: gib jedem Element `--i`, leite `--a: calc(var(--i) * 360deg / var(--n))` ab und verschiebe um `calc(cos(var(--a)) * var(--r))` und `calc(sin(var(--a)) * var(--r))`. Nutze `sibling-index()` statt inline `--i`, wo unterstützt (siehe fx-034). Keine JS-Positionierung.