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-1e1.sin(): retorna o seno de um ângulo, que é um valor entre-1e1.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
--radiusdo círculo. - A (linha vermelha) "externa" é uma linha do centro do círculo ao longo do eixo X. O comprimento é igual à
--radiusmultiplicada pelo cosseno de--angle. - O "oposto" (linha azul) é uma linha a partir do centro do ponto ao longo do eixo Y. O comprimento é igual à
--radiusmultiplicada 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().