Funkcje trygonometryczne w CSS

Oblicz sinus, cosinus, tangens i inne wartości w CSS.

Bramus

Funkcje trygonometryczne

W CSS możesz zapisywać wyrażenia matematyczne. Na podstawy znajduje się funkcja calc() służąca do wykonywania obliczeń, ale najprawdopodobniej znasz też min(), max() i clamp().

Połączenie tych funkcji to funkcje trygonometryczne sin(), cos(), tan(), asin(), acos(), atan() i atan2(). Te funkcje zostały zdefiniowane w module Wartości CSS i Jednostki na poziomie 4. Są one dostępne we wszystkich przeglądarkach.

sin(), cos() i tan()

Trzy podstawowe funkcje trygonometryczne to:

• cos(): zwraca cosinus kąta, który jest wartością z zakresu od -1 do 1.
• sin(): zwraca sinus kąta, który jest wartością z zakresu od -1 do 1.
• tan(): zwraca tangens kąta, który jest wartością z zakresu od −∞ do +∞.

W przeciwieństwie do swoich odpowiedników w języku JavaScript funkcje te akceptują jako argumenty kąty i radiany.

W poniższej prezentacji funkcje te służą do rysowania linii tworzących trójkąt otaczający zbiór --angle:

• „przeciwprostokątna” (żółta linia) to linia biegnąca od środka okręgu do pozycji kropki. Jego długość jest równa --radius okręgu.
• Element „sąsiedni” (czerwona linia) to linia biegnąca od środka okręgu na osi X. Jego długość jest równa --radius pomnożonej przez cosinus wyniku --angle.
• Wyrażenie „przeciwieństwie” (niebieska linia) to linia biegnąca od środka kropki na osi Y. Jego długość jest równa --radius pomnożona przez sinus, czyli --angle.
• Funkcja tan() w tabeli --angle służy do rysowania zielonej linii od kropki w stronę osi X.

asin(), acos(), atan() i atan2()

Odpowiedniki łuku lub odwrotności do sin(), cos() i tan() to odpowiednio asin(), acos() i atan(). Te funkcje wykonują obliczenia w przeciwnym kierunku: przyjmują wartość liczbową jako argument i zwracają odpowiedni kąt.

Ostatnią funkcją jest atan2(), która akceptuje 2 argumenty A i B. Funkcja zwraca kąt między dodatnią osią X a punktem (B,A).

Przykłady

Te funkcje mają różne zastosowania. Poniżej znajdziesz ich niewiele.

Przenoszenie elementów po okrągłej ścieżce wokół punktu centralnego

W poniższej prezentacji punkty obracają się wokół centralnego punktu. Zamiast obracać każdą kropkę wokół własnego środka i przesuwać ją na zewnątrz, każda kropka jest przesuwana na osi X i Y. Odległość na osi X i Y są określone przez uwzględnienie odpowiednio cos() oraz sin() wartości --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)
  ;
}

Aby rozłożyć kropki równomiernie wokół punktu środkowego, każda kropka ma dodatkowe przesunięcie w oparciu o jej indeks nth-child. Jeśli na przykład istnieją 3 kropki, między nimi odległość wynosi 120deg (= 360deg / 3).

• Pierwszy element podrzędny z trzech jest przesunięty o 0 x 120deg = 0deg.
• Drugi element podrzędny z 3 jest przesunięty o 1 x 120deg = 120deg.
• Trzeci element podrzędny z 3 jest przesunięty o 2 x 120deg = 240deg.

Obracanie elementu tak, aby był zwrócony do początku

Funkcja atan2() oblicza kąt względny między jednym punktem a drugim. Jako parametry funkcji ta funkcja akceptuje 2 wartości rozdzielane przecinkami: pozycję y i x drugiego punktu w odniesieniu do punktu początkowego, który znajduje się w miejscu początkowym 0,0.

Korzystając z indywidualnych właściwości przekształcenia, można obracać elementy w taki sposób, aby stykały się ze sobą.

W poniższym przykładzie pola są obrócone, aby były skierowane w stronę miejsca, w którym znajduje się mysz. Pozycja myszy jest synchronizowana z usługą niestandardową przez 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)
          );
}

Najciekawsze momenty społeczności

Jak widać na tym animowanym fragmencie Möbius autorstwa Any Tudor, tagi cos() i sin() mogą być używane nie tylko do tłumaczenia. Ich wynik służy do manipulowania komponentami s i l funkcji koloru hsl().