Calcule o seno, o cosseno, a tangente e muito mais no CSS.
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 é provável que você também já tenha ouvido falar de min()
, max()
e clamp()
.
A junção dessas funções são as funções trigonométricas sin()
, cos()
, tan()
, asin()
, acos()
, atan()
e atan2()
. Essas funções são definidas no nível 4 do módulo de unidades e valores CSS 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
e1
.sin()
: retorna o seno de um ângulo, que é um valor entre-1
e1
.tan()
: retorna a tangente de um ângulo, que é um valor entre−∞
e+∞
.
Ao contrário de suas contrapartes JavaScript, essas funções aceitam ângulos e radianos como seu argumento.
Na demonstração a seguir, essas funções são usadas para desenhar as linhas que compõem o triângulo ao redor do conjunto --angle
:
- A "hipotenusa" (linha amarela) é uma linha do centro do círculo até a posição do ponto. O comprimento é igual ao
--radius
do círculo. - A (linha vermelha) "externa" é uma linha do centro do círculo ao longo do eixo X. O comprimento é igual à
--radius
multiplicada pelo cosseno de--angle
. - O "oposto" (linha azul) é uma linha a partir do centro do ponto ao longo do eixo Y. O comprimento é igual à
--radius
multiplicada pelo seno da--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 inversa de sin()
, cos()
e tan()
são asin()
, acos()
e atan()
, respectivamente. Essas funções fazem o cálculo na direção oposta: elas recebem um valor numérico como argumento e retornam o ângulo correspondente.
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. O que se segue é 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 depois movê-lo para fora, cada ponto é transladado 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 de maneira uniforme ao redor do ponto central, cada ponto recebe um deslocamento adicional com base no índice nth-child
. Por exemplo, se houver três pontos, há uma distância de 120deg
(= 360deg / 3
) entre cada ponto.
- O primeiro elemento filho de três recebe deslocamento de
0 x 120deg
=0deg
. - O segundo elemento filho de três recebe deslocamento de
1 x 120deg
=120deg
. - O terceiro elemento filho de três recebe deslocamento de
2 x 120deg
=240deg
.
Gire um elemento para ficar de frente para a origem
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 fica na origem 0,0
.
Com o valor calculado, é possível girar os elementos de modo que eles fiquem lado a lado, usando as Propriedades de transformação individuais.
No exemplo a seguir, as caixas são giradas para que fiquem voltadas para o local do mouse. A posição do mouse é sincronizada com uma propriedade personalizada por 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 faixa animada de Möbius de Ana Tudor, cos()
e sin()
podem ser usados para mais do que apenas traduções. Aqui, o resultado é usado para manipular os componentes s
e l
da função de cor hsl()
.