Funzioni trigonometriche in CSS

Calcola il seno, il coseno, la tangente e altri valori in CSS.

Bramus

Funzioni trigonometriche

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

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

sin(), cos() e tan()

Le tre funzioni trig di base sono:

• cos(): restituisce il coseno di un angolo, che è 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 è un valore compreso tra −∞ e +∞.

A differenza delle loro 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 che va dal centro del cerchio alla posizione del punto. La sua lunghezza è uguale al --radius del cerchio.
• L'elemento "adiacente" (linea rossa) è una linea che parte dal centro del cerchio lungo l'asse X. La sua lunghezza è uguale al valore di --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 è uguale al valore di --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 nella 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 diversi casi d'uso per queste funzioni. Di seguito è riportato un piccolo elenco.

Spostare elementi su un percorso circolare intorno a un punto centrale

Nella demo seguente, i punti ruotano attorno a un punto centrale. Invece di ruotare ciascun punto attorno al proprio centro e poi di spostarlo verso l'esterno, ogni punto viene traslato sugli assi X e Y. Le distanze sugli assi X e Y sono determinate prendendo in considerazione cos() e, rispettivamente, il 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, la distanza tra ogni punto è 120deg (= 360deg / 3).

• Il primo elemento secondario di tre ottiene l'offset di 0 x 120deg = 0deg.
• Il secondo elemento secondario di tre viene spostato in base a 1 x 120deg = 120deg.
• Il terzo elemento secondario di tre ottiene l'offset di 2 x 120deg = 240deg.

Ruotare un elemento per affrontarne l'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 nell'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 individuale.

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)
          );
}

Community in evidenza

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