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

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

Bramus

חגיגה: תכונת האינטרנט הזו זמינה עכשיו בכל שלושת מנועי הדפדפן!

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

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

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

תמיכה בדפדפן

• 111
• 111
• 108
• 15.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)
          );
}

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

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