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

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

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

أخيرًا، هناك atan2() التي تقبل وسيطتين A وB. تعرض الدالة الزاوية بين المحور X الموجب والنقطة (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().