Oblicz sinus, cosinus, trójkąt i inne funkcje w CSS.
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()
cos()
i tan()
3 podstawowe funkcje trygonometryczne:
cos()
: zwraca cosinus kąta, który jest wartością z zakresu od-1
do1
.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()
.