Fungsi trigonometri di CSS

Hitung sinus, kosinus, tangen, dan lainnya di CSS.

Bramus

Fungsi Trigonometri

Dalam CSS, Anda dapat menulis ekspresi matematika. Di dasar terdapat fungsi calc() untuk melakukan penghitungan, tetapi kemungkinan besar Anda juga pernah mendengar tentang min(), max(), dan clamp().

Penggabungan fungsi-fungsi berikut akan menghasilkan fungsi trigonometri sin(), cos(), tan(), asin(), acos(), atan(), dan atan2(). Fungsi ini ditentukan di Nilai CSS dan Modul Unit Level 4 dan tersedia di semua browser.

sin(), cos(), dan tan()

Tiga fungsi inti trig adalah:

• cos(): Menampilkan kosinus sudut, yang merupakan nilai antara -1 dan 1.
• sin(): Menampilkan sinus sudut, yang merupakan nilai antara -1 dan 1.
• tan(): Menampilkan tangen sudut, yang merupakan nilai antara −∞ dan +∞.

Tidak seperti padanan di JavaScript, fungsi ini menerima sudut dan radian sebagai argumennya.

Dalam demo berikut, fungsi ini digunakan untuk menggambar garis yang membentuk segitiga yang mengelilingi kumpulan --angle:

• "Hipotenusa" (garis kuning) adalah garis dari tengah lingkaran ke posisi titik. Panjangnya sama dengan --radius lingkaran.
• "Berdekatan" (garis merah) adalah garis dari tengah lingkaran di sepanjang sumbu X. Panjangnya sama dengan --radius dikalikan dengan kosinus --angle.
• "Sebaliknya" (garis biru) adalah garis dari tengah titik di sepanjang sumbu Y. Panjangnya sama dengan --radius dikalikan dengan sinus dari --angle.
• Fungsi tan() dari --angle digunakan untuk menggambar garis hijau dari titik menuju sumbu X.

asin(), acos(), atan(), dan atan2()

Pasangan arc atau terbalik dengan sin(), cos(), dan tan() berturut-turut adalah asin(), acos(), dan atan(). Fungsi ini melakukan perhitungan dengan arah yang berlawanan: fungsi ini mengambil nilai numerik sebagai argumen dan menampilkan sudut yang sesuai untuknya.

Terakhir, ada atan2() yang menerima dua argumen, A dan B. Fungsi ini menampilkan sudut antara sumbu X positif dan titik (B,A).

Contoh

Ada berbagai kasus penggunaan untuk fungsi ini. Berikut ini adalah beberapa pilihan.

Memindahkan item pada jalur melingkar di sekitar titik pusat

Dalam demo berikut, titik-titik berputar di sekitar titik pusat. Alih-alih memutar setiap titik di sekitar pusatnya sendiri, lalu memindahkannya ke luar, setiap titik diterjemahkan pada sumbu X dan Y. Jarak pada sumbu X dan Y ditentukan dengan memperhitungkan cos() dan, masing-masing, sin() dari --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)
  ;
}

Untuk mendistribusikan titik secara merata di sekitar titik pusat, setiap titik diberi offset tambahan berdasarkan indeks nth-child-nya. Misalnya, jika ada tiga titik, terdapat jarak 120deg (= 360deg / 3) di antara setiap titik.

• Elemen turunan pertama dari tiga di-offset sebesar 0 x 120deg = 0deg.
• Elemen turunan kedua dari tiga diimbangi oleh 1 x 120deg = 120deg.
• Elemen turunan ketiga dari tiga di-offset sebesar 2 x 120deg = 240deg.

Memutar elemen untuk menghadapi asalnya

Fungsi atan2() menghitung sudut relatif dari satu titik ke titik lainnya. Fungsi ini menerima dua nilai yang dipisahkan koma sebagai parameternya: posisi y dan x dari titik lain, relatif terhadap titik asal yang berada di asal 0,0.

Dengan nilai yang dihitung, Anda dapat merotasi elemen yang saling berhadapan, menggunakan Properti Transformasi Individual.

Pada contoh berikut, kotak diputar sehingga menghadap ke lokasi mouse. Posisi mouse disinkronkan ke properti kustom melalui 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)
          );
}

Sorotan komunitas

Seperti yang ditunjukkan dalam animasi Möbius strip oleh Ana Tudor ini, cos() dan sin() dapat digunakan untuk lebih dari sekadar terjemahan. Di sini, hasilnya digunakan untuk memanipulasi komponen s dan l dari fungsi warna hsl().