الدوال المثلثية في 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 للدائرة.
• و"المتجاور" (الخط الأحمر) هو خط من وسط الدائرة على طول المحور س. ويساوي طوله حاصل ضرب --radius في جيب التمام لـ --angle.
• "المقابل" (الخط الأزرق) هو خط من وسط النقطة على طول المحور الصادي. يُرجى العلم أنّ طوله يساوي --radius مضروبًا في جيب الزاوية --angle.
• يتم استخدام الدالة tan() في --angle لرسم الخط الأخضر من النقطة باتجاه المحور X.

asin() وacos() وatan() وatan2()

نظيرات القوس أو المعكوس لـ sin() وcos() وtan() هي asin() وacos() وatan() على التوالي. تقوم هذه الدوال بالحساب في الاتجاه المعاكس: تأخذ قيمة رقمية كوسيطة وترجع الزاوية المقابلة لها.

أخيرًا، هناك atan2() الذي يقبل وسيطتين A وB. تعرض الدالة الزاوية بين المحور س الموجب والنقطة (B,A).

أمثلة

هناك حالات استخدام مختلفة لهذه الدوال. فيما يلي مجموعة صغيرة من الاختيارات.

تحريك العناصر على مسار دائري حول نقطة مركزية

في العرض التوضيحي التالي، تدور النقاط حول نقطة مركزية. بدلاً من تدوير كل نقطة حول مركزها الخاص ثم تحريكها للخارج، تتم ترجمة كل نقطة على المحورين "س" و"ص". ويتمّ تحديد المسافات على المحورين "س" و"ص" من خلال وضع 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().