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

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

ברמוס

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

ב-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)
          );
}

רגעי שיא בקהילה

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