Funkcje trygonometryczne w CSS

Oblicz sinus, cosinus, trójkąt i inne funkcje w CSS.

Bramus

Funkcje trygonometryczne

W CSS można pisać wyrażenia matematyczne. Podstawą jest funkcja calc() do wykonywania obliczeń, ale prawdopodobnie słyszałeś/słyszałaś też o funkcjach min(), max() i clamp().

Funkcje te są połączone z funkcjami trygonometrycznymi sin(), cos(), tan(), asin(), acos(), atan() i atan2(). Te funkcje są zdefiniowane w module 4 poziomu CSS Wartości i jednostki i są dostępne we wszystkich przeglądarkach.

sin(), cos() i tan()

3 podstawowe funkcje trygonometryczne:

• 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 -1–1.
• tan(): zwraca tangens kąta, który jest wartością z zakresu −∞–+∞.

W przeciwieństwie do odpowiedników w JavaScriptie te funkcje przyjmują jako argumenty zarówno kąty, jak i radiany.

W tym samouczku do rysowania linii tworzących trójkąt wokół zbioru --angle użyto tych funkcji:

• „Przekątna” (żółta linia) to linia od środka okręgu do pozycji kropki. Jego długość jest równa --radius koła.
• „Sąsiednia” (czerwona linia) to linia biegnąca od środka koła wzdłuż osi X. Jego długość jest równa --radius pomnożonej przez współczynnik cosinusa kąta --angle.
• „Odwrociem” (niebieska linia) jest linia biegnąca od środka punktu wzdłuż osi Y. Jego długość jest równa --radius pomnożonej przez sinus --angle.
• Funkcja tan() z poziomu --angle służy do rysowania zielonej linii od punktu do osi X.

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

Arc lub inverse odpowiedniki funkcji sin(), cos() i tan() to odpowiednio asin(), acos() i atan(). Te funkcje wykonują obliczenia w odwrotnej kolejności: przyjmują jako argument wartość liczbową i zwracają odpowiadający jej kąt.

Na koniec funkcja 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 znajduje się mały wybór.

Przenoszenie elementów po ścieżce okrężnej wokół punktu centralnego

W tym pokazie kropki obracają się wokół punktu centralnego. Zamiast obracać każdą kropkę wokół jej środka, a potem przesuwać na zewnątrz, każda kropka jest przesuwana wzdłuż osi X i Y. Odległości na osiach X i Y są określane na podstawie wartości cos() i odpowiednio sin() elementu --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 rozmieścić kropki równomiernie wokół punktu centralnego, każda z nich ma dodatkowy przesunięcie na podstawie indeksu nth-child. Jeśli na przykład są 3 kropki, odległość między każdą z nich wynosi 120deg (= 360deg / 3).

• Pierwszy z 3 elementów podrzędnych jest przesunięty o wartość 0 x 120deg = 0deg.
• Drugi z 3 elementów podrzędnych jest przesunięty o wartość 1 x 120deg = 120deg.
• Trzeci z 3 elementów podrzędnych jest przesunięty o wartość 2 x 120deg = 240deg.

Obróć element, aby był skierowany w stronę punktu początkowego

Funkcja atan2() oblicza kąt względny między jednym punktem a drugim. Funkcja przyjmuje 2 wartości rozdzielone przecinkami jako parametry: pozycję y i x drugiego punktu względem punktu początkowego, który znajduje się w początku kartezjańskim 0,0.

Dzięki obliczonej wartości możesz obracać elementy, aby były skierowane na siebie, korzystając z właściwości indywidualnej transformacji.

W tym przykładzie pola są obracane, aby były skierowane w kierunku kursora. Pozycja myszy jest synchronizowana z niestandardową właściwością za pomocą kodu 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)
          );
}

Najważniejsze wydarzenia w społeczności

Jak pokazuje animowany pasek Möbiusa autorstwa Any Tudor, cos() i sin() mogą być używane nie tylko do tłumaczeń. Wynik jest tu używany do manipulowania komponentami s i l funkcji koloru hsl().