Oblicz sinus, cosinus, tangens i inne elementy w CSS.
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.
sin()
, cos()
i tan()
Główne trzy funkcje trygonometryczne to:
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 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()
.