Fungsi trigonometri di CSS

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

Bramus

Fungsi Trigonometri

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

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

Dukungan Browser

  • 111
  • 111
  • 108
  • 15,4

Sumber

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

Tiga fungsi trigulasi inti adalah:

  • cos(): Menampilkan kosinus sudut, yaitu 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 padanannya JavaScript, fungsi ini menerima sudut dan radian sebagai argumennya.

Pada 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 pusat lingkaran di sepanjang sumbu X. Panjangnya sama dengan --radius dikalikan dengan kosinus --angle.
  • "Kebalikan" (garis biru) adalah garis dari pusat 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()

Kebalikan arc atau invers dari sin(), cos(), dan tan() masing-masing adalah asin(), acos(), dan atan(). Fungsi ini melakukan penghitungan dalam arah yang berlawanan: fungsi tersebut mengambil nilai numerik sebagai argumennya dan menampilkan sudut yang sesuai dengan nilai tersebut.

Terakhir adalah 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 tersebut mengitari titik pusat. Setiap titik diterjemahkan pada sumbu X dan Y, bukan memutar setiap titik di pusatnya sendiri lalu memindahkannya ke luar. Jarak pada sumbu X dan Y ditentukan dengan memperhitungkan cos() dan sin() dari --angle masing-masing.

: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, ada jarak 120deg (= 360deg / 3) di antara setiap titik.

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

Memutar elemen untuk 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 titik lainnya, relatif terhadap titik awal yang berada di asal 0,0.

Dengan nilai yang dihitung, Anda dapat memutar elemen sehingga elemen tersebut saling menghadap, menggunakan Properti Transformasi Individual.

Pada 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 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().