الدوال المثلثية في CSS

احتساب جيب الزاوية وجيب التمام وظل الزاوية وغير ذلك في CSS

Bramus

الدوال المثلثية

في CSS، من الممكن كتابة تعبيرات رياضية. في الأساس، تُستخدَم الدالة calc() لإجراء العمليات الحسابية، ولكن من المرجّح أنّك سمعت أيضًا عن min() وmax() وclamp().

تشمل الدوالّ المثلثية التي تنضم إلى هذه الدوالّ sin() وcos() وtan() وasin() وacos() وatan() وatan2(). تم تحديد هذه الدوالّ في المستوى 4 من وحدة "قيم CSS ووحداتها" وهي متاحة في جميع المتصفّحات.

sin() وcos() وtan()

الدوال الثلاث الأساسية للثنائية هي:

• cos(): تعرِض هذه الدالة جيب تمام زاوية، وهي قيمة تتراوح بين -1 و1.
• sin(): لعرض جيب الزاوية، وهي قيمة تتراوح بين -1 و1.
• ‫tan(): لعرض المماس لزاوية، وهي قيمة تتراوح بين −∞ و+∞.

على عكس نظيراتها في JavaScript، تقبل هذه الدوال كلاً من الزوايا والراديان كوسيطة لها.

في العرض التقديمي التالي، يتم استخدام هذه الدوال لرسم الخطوط التي تشكّل المثلث المحيط بالمجموعة --angle:

• "الوتر" (الخط الأصفر) هو خط يمتد من مركز الدائرة إلى موضع النقطة. يساوي طوله --radius الدائرة.
• "الجانب المجاور" (الخط الأحمر) هو خط من مركز الدائرة على طول المحور X. يساوي طوله --radius مضروبًا في جيب تمام --angle.
• "الجانب المقابل" (الخط الأزرق) هو خط من مركز النقطة على طول المحور ص. يساوي طوله --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 من إنشاء "آنا تودور"، يمكن استخدام cos() وsin() لأكثر من مجرد الترجمة. في ما يلي، يتم استخدام محصلة هذه الدوالّ لمعالجة مكوّنات s وl من دالة اللون hsl().