Funkcje trygonometryczne w CSS

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

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()clamp().

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

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Źródło

sin(), cos()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 -11.
  • 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()atan2()

Arc lub inverse odpowiedniki funkcji sin(), cos()tan() to odpowiednio asin(), acos()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: AB. 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ę yx 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()sin() mogą być używane nie tylko do tłumaczeń. Wynik jest tu używany do manipulowania komponentami sl funkcji koloru hsl().