Fungsi trigonometri di CSS

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

Bramus

Fungsi Trigonometri

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

Fungsi trigonometri sin(), cos(), tan(), asin(), acos(), atan(), dan atan2() bergabung dengan fungsi ini. Fungsi ini ditentukan dalam Modul Nilai dan Unit CSS Level 4 dan tersedia di semua browser.

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

Tiga fungsi trigonometri intinya adalah:

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

Tidak seperti fungsi JavaScript-nya, fungsi ini menerima sudut dan radian sebagai argumennya.

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

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

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

Arc atau inverse yang sesuai dengan sin(), cos(), dan tan() adalah asin(), acos(), dan atan(). Fungsi ini melakukan penghitungan dalam arah yang berlawanan: fungsi ini mengambil nilai numerik sebagai argumennya 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 adalah beberapa pilihan.

Memindahkan item pada jalur melingkar di sekitar titik pusat

Dalam demo berikut, titik berputar di sekitar titik pusat. Setiap titik diterjemahkan pada sumbu X dan Y, bukan diputar di sekitar pusatnya sendiri, lalu dipindahkan ke luar. Jarak pada sumbu X dan Y ditentukan dengan mempertimbangkan cos() dan 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 tengah, setiap titik diberi offset tambahan berdasarkan indeks nth-child-nya. Misalnya, jika ada tiga titik, ada jarak 120deg (= 360deg / 3) di antara setiap titik.

• Elemen turunan pertama dari tiga elemen mendapatkan offset 0 x 120deg = 0deg.
• Elemen turunan kedua dari tiga elemen akan diimbangi dengan 1 x 120deg = 120deg.
• Elemen turunan ketiga dari tiga elemen akan diimbangi dengan 2 x 120deg = 240deg.

Memutar elemen agar menghadap ke 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 memutar elemen sehingga saling berhadapan, menggunakan Properti Transformasi Individual.

Dalam contoh berikut, kotak diputar sehingga menghadap 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 Animated Möbius strip by 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().