M

MLOG

Polski

Odkryj moc funkcji trygonometrycznych CSS (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) do tworzenia złożonych, dynamicznych i precyzyjnych układów.

Funkcje trygonometryczne CSS: Matematyczne obliczenia układu dla dynamicznych projektów

CSS, tradycyjnie znany ze stylizowania statycznych elementów, ewoluował, oferując potężne narzędzia do dynamicznego i responsywnego projektowania stron internetowych. Wśród nich znajdują się funkcje trygonometryczne, które pozwalają programistom wykorzystywać zasady matematyczne bezpośrednio w CSS. Ten artykuł bada, jak wykorzystywać `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` i `atan2()` do tworzenia złożonych, dynamicznych i matematycznie precyzyjnych układów.

Zrozumienie funkcji trygonometrycznych CSS

Funkcje trygonometryczne w CSS umożliwiają wykonywanie obliczeń na podstawie kątów, co skutkuje wartościami, które można wykorzystać dla różnych właściwości CSS, takich jak `transform`, `width`, `height` i inne. Otwiera to możliwości tworzenia okrągłych układów, złożonych animacji i responsywnych projektów, które matematycznie dostosowują się do różnych rozmiarów ekranu.

Podstawowe funkcje: sin(), cos() i tan()

Funkcje te są podstawą obliczeń trygonometrycznych:

Odwrotne funkcje trygonometryczne: asin(), acos(), atan() i atan2()

Odwrotne funkcje trygonometryczne pozwalają obliczyć kąt na podstawie znanego stosunku:

Praktyczne zastosowania i przykłady

Przyjrzyjmy się kilku praktycznym zastosowaniom funkcji trygonometrycznych CSS.

1. Tworzenie okrągłego układu

Jednym z częstych przypadków użycia jest rozmieszczanie elementów w okręgu. Można to osiągnąć, obliczając pozycję każdego elementu na podstawie jego indeksu i całkowitej liczby elementów, używając `sin()` i `cos()` do określenia współrzędnych x i y względem środka okręgu.

HTML:

<div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 </div>

CSS:

.circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}

W tym przykładzie obliczamy pozycję każdego elementu `.item` za pomocą `sin()` i `cos()`. Kąt jest określany przez podzielenie 360 stopni przez liczbę elementów (5) i pomnożenie go przez indeks elementu. Wynikowe wartości `sin()` i `cos()` są następnie używane do obliczenia pozycji `top` i `left`, skutecznie umieszczając elementy w okrągłym układzie. Wartość `85px` reprezentuje promień okręgu, a `15px` kompensuje rozmiar elementu.

2. Tworzenie animacji falowych

Funkcje trygonometryczne doskonale nadają się do tworzenia płynnych animacji falowych. Możesz użyć `sin()` lub `cos()`, aby modulować pozycję, przezroczystość lub inne właściwości elementu w czasie.

HTML:

<div class="wave-container">
 <div class="wave-item"></div>
</div>

CSS:

.wave-container {
 width: 100%;
 height: 100px;
 overflow: hidden;
 position: relative;
}

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

@keyframes wave {
 0% {
 transform: translateX(0) translateY(calc(sin(0deg) * 20px));
 }
 50% {
 transform: translateX(-50%) translateY(calc(sin(180deg) * 20px));
 }
 100% {
 transform: translateX(-100%) translateY(calc(sin(360deg) * 20px));
 }
}

W tym przykładzie animacja `wave` wykorzystuje `sin()` do obliczenia pionowej pozycji (`translateY`) elementu `.wave-item`. W miarę postępu animacji wartość sinusa zmienia się, tworząc płynny, falujący efekt. `translateX` zapewnia ciągły ruch fali.

3. Tworzenie responsywnych łuków i krzywych

Funkcje trygonometryczne CSS można łączyć z jednostkami viewportu (takimi jak `vw` i `vh`), aby tworzyć responsywne łuki i krzywe, które dostosowują się do różnych rozmiarów ekranu.

HTML:

<div class="arc-container">
 <div class="arc-element"></div>
</div>

CSS:

.arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}

W tym przykładzie używamy niestandardowych właściwości CSS (`--angle`) i funkcji trygonometrycznych do ustawienia pozycji `.arc-element` wzdłuż łuku. Właściwości `left` i `top` są obliczane na podstawie odpowiednio `cos()` i `sin()`, a kąt zmienia się w czasie dzięki animacji `arc`. Jednostki viewportu (`vw` i `vh`) zapewniają, że łuk dostosowuje się proporcjonalnie do rozmiaru ekranu.

4. Obliczanie odległości za pomocą `atan2()`

`atan2()` może określić kąt między dwoma punktami, co jest przydatne do tworzenia efektów, w których elementy reagują na swoje wzajemne pozycje.

Rozważmy scenariusz, w którym masz dwa elementy i chcesz obrócić jeden, aby zawsze wskazywał na drugi:

HTML:

<div class="container">
 <div class="target">Target</div>
 <div class="pointer">Pointer</div>
</div>

CSS (z JavaScript):

.container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* Important for correct rotation */
}

JavaScript:

const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.getBoundingClientRect();

 const centerX = containerRect.left + containerRect.width / 2;
 const centerY = containerRect.top + containerRect.height / 2;

 const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});

W tym przykładzie JavaScript służy do pobierania współrzędnych myszy względem kontenera. `Math.atan2()` oblicza kąt między środkiem kontenera (działającym jako początek) a pozycją myszy. Kąt ten jest następnie używany do obracania elementu `.pointer`, zapewniając, że zawsze wskazuje on kursor myszy. `transform-origin: left center;` jest kluczowe, aby zapewnić, że wskaźnik obraca się poprawnie wokół lewego środkowego punktu.

Korzyści z używania funkcji trygonometrycznych w CSS

Uwagi i najlepsze praktyki

Wniosek

Funkcje trygonometryczne CSS stanowią potężny zestaw narzędzi do tworzenia dynamicznych, responsywnych i matematycznie precyzyjnych projektów stron internetowych. Rozumiejąc i wykorzystując te funkcje, programiści mogą odblokować nowe możliwości w zakresie układu, animacji i interaktywnych elementów, znacznie poprawiając wrażenia użytkownika. Od okrągłych układów i animacji falowych po responsywne łuki i pozycjonowanie elementów, zastosowania są rozległe i zróżnicowane. Chociaż należy dokładnie rozważyć kompatybilność przeglądarek, wydajność i czytelność, korzyści z włączenia funkcji trygonometrycznych do przepływu pracy CSS są niezaprzeczalne, co pozwala tworzyć naprawdę angażujące i wyrafinowane wrażenia z przeglądania stron internetowych. Wraz z ciągłą ewolucją CSS, opanowanie tych technik będzie coraz bardziej wartościowe dla projektantów i programistów stron internetowych na całym świecie.

Ta wiedza pozwala na tworzenie bardziej skomplikowanych i atrakcyjnych wizualnie projektów. Eksploruj te techniki i eksperymentuj z różnymi parametrami, aby odblokować pełny potencjał funkcji trygonometrycznych CSS w swoich projektach tworzenia stron internetowych.