Oblicz sinus, cosinus, trójkąt i inne funkcje w CSS.
Funkcje trygonometryczne
W CSS można pisać wyrażenia matematyczne. Na podstawy znajduje się funkcja calc()
służąca do wykonywania obliczeń, ale najprawdopodobniej znasz też 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 specyfikacji CSS dotyczącej wartości i jednostek 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 od-1
do1
.tan()
: zwraca tangens kąta, który jest wartością z zakresu−∞
–+∞
.
W przeciwieństwie do swoich odpowiedników w języku JavaScript funkcje te akceptują jako argumenty kąty i radiany.
W tym pokazie te funkcje 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. - „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()
Odpowiedniki łuku lub odwrotności do 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 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 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. 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
.
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 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 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)
);
}
Najciekawsze momenty 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()
.