Funkcje trygonometryczne w CSS

Oblicz sinus, cosinus, tangens i inne elementy w CSS.

Bramus

Funkcje trygonometryczne

W CSS można zapisywać wyrażenia matematyczne. Na dole znajduje się funkcja calc() do wykonywania obliczeń, ale najprawdopodobniej słyszałeś też o funkcjach min(), max() i clamp().

Łączenie tych funkcji to funkcje trygonometryczne sin(), cos(), tan(), asin(), acos(), atan() i atan2(). Te funkcje są zdefiniowane w modułach wartości CSS i jednostki na poziomie 4 i są dostępne we wszystkich przeglądarkach.

Obsługa przeglądarek

  • 111
  • 111
  • 108
  • 15,4

Źródło

sin(), cos() i tan()

Główne trzy 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ą zarówno kąty, jak i radiany.

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

  • „Przeprostokątna” (żółta linia) to linia biegnąca od środka okręgu do pozycji punktu. Jego długość jest równa --radius okręgu.
  • „Sąsiadująca” (czerwona linia) to linia biegnąca od środka okręgu na osi X. Jego długość jest równa --radius pomnożonej przez cosinus --angle.
  • „Przeciwieństwo” (niebieska linia) to linia biegnąca od środka kropki na osi Y. Jego długość jest równa --radius pomnożonej przez sinus --angle.
  • Funkcja tan() obiektu --angle służy do rysowania zielonej linii od punktu w kierunku osi X.

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

Odpowiedniki aukcyjne lub odwrotne wartości 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.

Jest jeszcze atan2(), który akceptuje 2 argumenty A i B. Ta funkcja zwraca kąt między dodatnią osią X a punktem (B,A).

Przykłady

Ich zastosowanie ma wiele różnych zastosowań. Poniżej znajduje się mały wybór.

Przesuwanie elementów po kołowej ścieżce wokół punktu centralnego

W poniższej wersji demonstracyjnej kropki obracają się wokół centralnego punktu. Zamiast obracać każdą kropkę wokół jej środka, a potem przesuwać ją na zewnątrz, każda kropka jest przesuwana na osi X i Y. Odległości na osiach X i Y są określane z uwzględnieniem cos() i odpowiednio sin() dla --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 równomiernie rozłożyć kropki wokół punktu środkowego, każda z nich ma dodatkowe przesunięcie na podstawie swojego indeksu nth-child. Jeśli np. znajdują się 3 kropki, między nimi odległość wynosi 120deg (= 360deg / 3).

  • Pierwszy element podrzędny z 3 jest opóźniony o 0 x 120deg = 0deg.
  • Drugi z 3 elementów podrzędnych jest przesunięty o 1 x 120deg = 120deg.
  • Trzeci element podrzędny z 3 jest przesunięty o 2 x 120deg = 240deg.

Obróć element, aby zobaczyć jego początek

Funkcja atan2() oblicza kąt względny między punktami. Funkcja może przyjmować jako parametry 2 wartości rozdzielone przecinkami: położenie y i x drugiego punktu względem punktu początkowego, który znajduje się w punkcie początkowym 0,0.

W przypadku obliczonej wartości można obrócić elementy, aby ustawić się w stronę siebie, przy użyciu poszczególnych właściwości przekształcenia.

W poniższym przykładzie pola są obracane tak, że są skierowane w stronę myszy. Pozycja myszy jest synchronizowana z właściwością niestandardową za pomocą JavaScriptu.

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

Wyróżnione ze społeczności

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