Funzioni trigonometriche in CSS

Calcola il seno, il coseno, la tangente e altro in CSS.

Bramus

Funzioni trigonometriche

Nel CSS è possibile scrivere espressioni matematiche. Alla base si trova la funzione calc() per i calcoli, ma molto probabilmente hai sentito parlare anche di min(), max() e clamp().

Unendo queste funzioni, sono le funzioni trigonometriche sin(), cos(), tan(), asin(), acos(), atan() e atan2(). Queste funzioni sono definite nel Livello 4 del modulo Valori CSS e Unità e sono disponibili in tutti i browser.

Supporto dei browser

  • 111
  • 111
  • 108
  • 15,4

Fonte

sin(), cos() e tan()

Le tre funzioni trig principali sono:

  • cos(): restituisce il coseno di un angolo, ossia un valore compreso tra -1 e 1.
  • sin(): restituisce il seno di un angolo, che è un valore compreso tra -1 e 1.
  • tan(): restituisce la tangente di un angolo, che rappresenta un valore compreso tra −∞ e +∞.

A differenza delle rispettive controparti JavaScript, queste funzioni accettano sia angoli sia radianti come argomento.

Nella demo seguente, queste funzioni vengono utilizzate per disegnare le linee che compongono il triangolo che circonda l'insieme --angle:

  • L'"ipotenusa" (linea gialla) è una linea dal centro del cerchio alla posizione del punto. La sua lunghezza corrisponde al valore --radius del cerchio.
  • L'"adiacente" (linea rossa) è una linea che parte dal centro del cerchio lungo l'asse X. La sua lunghezza corrisponde al valore --radius moltiplicato per il coseno di --angle.
  • L'"opposto" (linea blu) è una linea che parte dal centro del punto lungo l'asse Y. La sua lunghezza corrisponde al valore --radius moltiplicato per il seno di --angle.
  • La funzione tan() di --angle viene utilizzata per tracciare la linea verde dal punto verso l'asse X.

asin(), acos(), atan() e atan2()

Le controparti arc o inverse di sin(), cos() e tan() sono rispettivamente asin(), acos() e atan(). Queste funzioni eseguono il calcolo in direzione opposta: prendono un valore numerico come argomento e restituiscono l'angolo corrispondente.

Infine c'è atan2(), che accetta due argomenti A e B. La funzione restituisce l'angolo tra l'asse X positivo e il punto (B,A).

Esempi

Esistono vari casi d'uso per queste funzioni. Di seguito trovi una piccola selezione.

Spostare elementi in un percorso circolare intorno a un punto centrale

Nella demo seguente, i punti ruotano attorno a un punto centrale. Anziché ruotare ciascun punto intorno al proprio centro e spostarlo verso l'esterno, ciascun punto viene traslato sugli assi X e Y. Le distanze sugli assi X e Y vengono determinate tenendo conto di cos() e, rispettivamente, di sin() di --angle.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

Per distribuire i punti in modo uniforme intorno al punto centrale, a ogni punto viene assegnato un offset aggiuntivo in base al relativo indice nth-child. Ad esempio, se ci sono tre punti, c'è una distanza di 120deg (= 360deg / 3) tra un punto e l'altro.

  • Il primo elemento secondario su tre viene offset da 0 x 120deg = 0deg.
  • Il secondo elemento secondario su tre viene offset da 1 x 120deg = 120deg.
  • Il terzo elemento secondario su tre viene offset da 2 x 120deg = 240deg.

Ruotare un elemento per adattarlo alla sua origine

La funzione atan2() calcola l'angolo relativo da un punto a un altro. La funzione accetta due valori separati da virgole come parametri: la posizione y e x dell'altro punto, rispetto al punto di origine che si trova all'origine 0,0.

Con il valore calcolato è possibile ruotare gli elementi in modo che siano uno di fronte all'altro utilizzando le proprietà di trasformazione individuali.

Nell'esempio seguente, le caselle sono ruotate in modo da essere rivolte verso la posizione del mouse. La posizione del mouse viene sincronizzata con una proprietà personalizzata tramite JavaScript.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

Contenuti in evidenza della community

Come dimostrato in questa striscia di Möbius in animazione di Ana Tudor, i contenuti cos() e sin() non possono essere utilizzati solo per le traduzioni. In questo caso, il risultato viene utilizzato per manipolare i componenti s e l della funzione colore hsl().