الدوال المثلثية في 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. تعرض الدالة الزاوية بين المحور س الموجب والنقطة (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().