Funções trigonométricas no CSS

Calcule o seno, o cosseno, a tangente e muito mais no CSS.

Bramus

Funções trigonométricas

No CSS, é possível escrever expressões matemáticas. Na base está a função calc() para fazer cálculos, mas provavelmente você também já ouviu falar de min(), max() e clamp().

A união dessas funções está nas funções trigonométricas sin(), cos(), tan(), asin(), acos(), atan() e atan2(). Essas funções são definidas no Módulo de unidades e valores CSS nível 4 e estão disponíveis em todos os navegadores.

sin(), cos() e tan()

As três principais funções trig são:

• cos(): retorna o cosseno de um ângulo, que é um valor entre -1 e 1.
• sin(): retorna o seno de um ângulo, que é um valor entre -1 e 1.
• tan(): retorna a tangente de um ângulo, que é um valor entre −∞ e +∞.

Ao contrário das versões JavaScript, essas funções aceitam ângulos e radianos como argumentos.

Na demonstração a seguir, essas funções são usadas para desenhar as linhas que formam o triângulo em torno do conjunto --angle:

• A "hipotenusa" (linha amarela) é uma linha que vai do centro do círculo até a posição do ponto. O comprimento é igual ao --radius do círculo.
• O elemento "contíguo" (linha vermelha) é uma linha do centro do círculo ao longo do eixo X. O comprimento é igual ao --radius multiplicado pelo cosseno da --angle.
• O "contrato" (linha azul) é uma linha do centro do ponto ao longo do eixo Y. O comprimento dela é igual a --radius multiplicado pelo seno de --angle.
• A função tan() do --angle é usada para desenhar a linha verde do ponto em direção ao eixo X.

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

As contrapartes arc ou inverse de sin(), cos() e tan() são asin(), acos() e atan(), respectivamente. Essas funções fazem o cálculo na direção oposta: elas pegam um valor numérico como argumento e retornam o ângulo correspondente a ele.

Por fim, há atan2(), que aceita dois argumentos A e B. A função retorna o ângulo entre o eixo X positivo e o ponto (B,A).

Exemplos

Há vários casos de uso para essas funções. Confira a seguir uma pequena seleção.

Mover itens em um caminho circular em torno de um ponto central

Na demonstração a seguir, os pontos giram em torno de um ponto central. Em vez de girar cada ponto em torno de seu próprio centro e movê-lo para fora, cada ponto é convertido nos eixos X e Y. As distâncias nos eixos X e Y são determinadas considerando o cos() e, respectivamente, o sin() do --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)
  ;
}

Para distribuir os pontos uniformemente ao redor do ponto central, cada ponto recebe um deslocamento adicional com base no índice nth-child. Por exemplo, se houver três pontos, haverá uma distância de 120deg (= 360deg / 3) entre cada ponto.

• O primeiro elemento filho de três é compensado por 0 x 120deg = 0deg.
• O segundo elemento filho de três é compensado por 1 x 120deg = 120deg.
• O terceiro elemento filho de três é compensado por 2 x 120deg = 240deg.

Gire um elemento para ficar de frente para a origem dele

A função atan2() calcula o ângulo relativo de um ponto a outro. A função aceita dois valores separados por vírgula como parâmetros: a posição y e x do outro ponto, em relação ao ponto de origem que está na origem 0,0.

Com o valor calculado, é possível girar elementos de modo que fiquem voltados uns para os outros usando as propriedades de transformação individual.

No exemplo a seguir, as caixas são giradas de modo que fiquem voltadas para o local do mouse. A posição do mouse é sincronizada com uma propriedade personalizada por meio de 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)
          );
}

Destaques da comunidade

Como demonstrado nesta tira animada de Möbius por Ana Tudor, cos() e sin() podem ser usados não apenas para traduções. Aqui, o resultado é usado para manipular os componentes s e l da função de cor hsl().