פונקציות טריגונומטריות ב-CSS

חישוב סינוס, קוסינוס, טנגנס ועוד ב-CSS.

Bramus

פונקציות טריגונומטריות

ב-CSS אפשר לכתוב ביטויים מתמטיים. בבסיס נמצאת הפונקציה calc() לביצוע חישובים, אבל סביר להניח ששמעתם גם על min(),‏ max() ו-clamp().

הפונקציות הטריגונומטריות sin(),‏ cos(),‏ tan(),‏ asin(),‏ acos(),‏ atan() ו-atan2() מצטרפות לפונקציות האלה. הפונקציות האלה מוגדרות בערכי CSS וברמה 4 במודול היחידות והן זמינות בכל הדפדפנים.

sin(), בcos() ובtan()

שלוש הפונקציות הטריגונומטריות העיקריות הן:

• cos(): הפונקציה מחזירה את הקוסינוס של זווית, שהיא ערך בין -1 ל-1.
• sin(): הפונקציה מחזירה את הסינוס של זווית, שהיא ערך בין -1 ל-1.
• tan(): הפונקציה מחזירה את הטנגנס של זווית, שהוא ערך בין −∞ ל-+∞.

בניגוד לפונקציות המקבילות ב-JavaScript, הפונקציות האלה מקבלות גם זוויות וגם רדיאנים כארגומנט.

בדמו הבא, הפונקציות האלה משמשות לציור הקווים שמרכיבים את המשולש שמקיף את הקבוצה --angle:

• ה"היפוטנוזה" (הקו הצהוב) היא קו שמחבר את מרכז המעגל למיקום הנקודה. האורך שלו שווה ל---radius של המעגל.
• הקו 'הסמוך' (הקו האדום) הוא קו שמחבר את מרכז המעגל לציר X. האורך שלה שווה ל---radius כפול הקוסינוס של --angle.
• ה'הפוך' (הקו הכחול) הוא קו ממרכז הנקודה לאורך ציר ה-Y. האורך שלו שווה ל---radius כפול סינוס של --angle.
• הפונקציה tan() של --angle משמשת לציור הקו הירוק מהנקודה לכיוון ציר X.

asin(), acos(), atan() וגם atan2()

המקבילים של sin(),‏ cos() ו-tan() בקשת או בהפוך הם asin(),‏ acos() ו-atan() בהתאמה. הפונקציות האלה מבצעות את החישוב בכיוון ההפוך: הן מקבלות ערך מספרי כארגומנט ומחזירות את הזווית התואמת.

לבסוף, יש את atan2() שמקבלת שני ארגומנטים, A ו-B. הפונקציה מחזירה את הזווית בין ציר ה-X החיובי לבין הנקודה (B,A).

דוגמאות

יש תרחישי שימוש שונים לפונקציות האלה. בהמשך מופיעה מבחר קטן.

העברת פריטים בנתיב מעגלי סביב נקודה מרכזית

בדמו הבא, הנקודות מסתובבות סביב נקודה מרכזית. במקום לסובב כל נקודה סביב המרכז שלה ואז להזיז אותה החוצה, כל נקודה מתרגמת בצירים X ו-Y. המרחקים בצירים X ו-Y נקבעים על סמך cos() ו-sin() של --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)
  ;
}

כדי לחלק את הנקודות באופן שווה סביב הנקודה המרכזית, לכל נקודה ניתנת תזוזה נוספת על סמך המדד nth-child שלה. לדוגמה, אם יש שלוש נקודות, המרחק בין כל נקודה הוא 120deg (= 360deg / 3).

• אלמנט הצאצא הראשון מתוך שלושה מקבל את ההיסט 0 x 120deg = 0deg.
• רכיב הצאצא השני מתוך שלושה יקוזז ב-1 x 120deg = 120deg.
• רכיב הצאצא השלישי מתוך שלושה מקבל את ההיסט 2 x 120deg = 240deg.

סיבוב רכיב כך שיהיה מול המקור שלו

הפונקציה atan2() מחשבת את הזווית היחסית מנקודה אחת לנקודה אחרת. הפונקציה מקבלת שני ערכים מופרדים בפסיקים כפרמטרים שלה: המיקום y ו-x של הנקודה השנייה, ביחס לנקודת המוצא שנמצאת במקור 0,0.

בעזרת הערך המחושב אפשר לסובב רכיבים כך שייצגו זה את זה, באמצעות מאפייני טרנספורמציה נפרדים.

בדוגמה הבאה, התיבות מסתובבות כך שייצגו את המיקום של העכבר. מיקום העכבר מסתנכרן עם מאפיין מותאם אישית באמצעות 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)
          );
}

המיטב של הקהילה

כפי שמוצג בפס Möbius מונפש של Ana Tudor, אפשר להשתמש ב-cos() וב-sin() למטרות נוספות מלבד תרגומים. כאן התוצאה שלהם משמשת לטיפול ברכיבים s ו-l של פונקציית הצבע hsl().