M

MLOG

العربية

استكشف قوة الدوال المثلثية في CSS (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) لإنشاء تخطيطات معقدة وديناميكية ودقيقة رياضيًا. تعلم مع أمثلة عملية ومقتطفات برمجية.

الدوال المثلثية في CSS: حسابات التخطيط الرياضية للتصاميم الديناميكية

تطورت لغة CSS، التي كانت معروفة تقليديًا بتنسيق العناصر الثابتة، لتقدم أدوات قوية لتصميم الويب الديناميكي والمتجاوب. من بين هذه الأدوات توجد الدوال المثلثية، التي تسمح للمطورين بالاستفادة من المبادئ الرياضية مباشرةً داخل CSS. يستكشف هذا المقال كيفية استخدام `sin()`، `cos()`، `tan()`، `asin()`، `acos()`، `atan()`، و `atan2()` لإنشاء تخطيطات معقدة وديناميكية ودقيقة رياضيًا.

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

تمكّنك الدوال المثلثية في CSS من إجراء حسابات تستند إلى الزوايا، مما ينتج عنه قيم يمكن استخدامها لخصائص CSS المختلفة مثل `transform`، `width`، `height`، وغيرها. يفتح هذا المجال إمكانيات لإنشاء تخطيطات دائرية، ورسوم متحركة معقدة، وتصاميم متجاوبة تتكيف رياضيًا مع أحجام الشاشات المختلفة.

الدوال الأساسية: sin(), cos(), و tan()

هذه الدوال هي أساس الحسابات المثلثية:

الدوال المثلثية العكسية: asin(), acos(), atan(), و atan2()

تسمح لك الدوال المثلثية العكسية بحساب الزاوية بناءً على نسبة معروفة:

التطبيقات العملية والأمثلة

دعنا نستكشف العديد من التطبيقات العملية للدوال المثلثية في CSS.

1. إنشاء تخطيط دائري

أحد حالات الاستخدام الشائعة هو ترتيب العناصر في دائرة. يمكن تحقيق ذلك عن طريق حساب موضع كل عنصر بناءً على فهرسه والعدد الإجمالي للعناصر، باستخدام `sin()` و `cos()` لتحديد الإحداثيات x و y بالنسبة لمركز الدائرة.

كود HTML:

<div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 </div>

كود CSS:

.circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}

في هذا المثال، نحسب موضع كل عنصر `.item` باستخدام `sin()` و `cos()`. يتم تحديد الزاوية بقسمة 360 درجة على عدد العناصر (5) وضربها في فهرس العنصر. ثم تُستخدم قيم `sin()` و `cos()` الناتجة لحساب موضعي `top` و `left`، مما يضع العناصر بشكل فعال في ترتيب دائري. تمثل القيمة `85px` نصف قطر الدائرة، و `15px` هي إزاحة لتعويض حجم العنصر.

2. إنشاء رسوم متحركة شبيهة بالأمواج

الدوال المثلثية ممتازة لإنشاء رسوم متحركة سلسة تشبه الأمواج. يمكنك استخدام `sin()` أو `cos()` لتعديل الموضع أو الشفافية أو خصائص أخرى لعنصر ما بمرور الوقت.

كود HTML:

<div class="wave-container">
 <div class="wave-item"></div>
</div>

كود CSS:

.wave-container {
 width: 100%;
 height: 100px;
 overflow: hidden;
 position: relative;
}

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

@keyframes wave {
 0% {
 transform: translateX(0) translateY(calc(sin(0deg) * 20px));
 }
 50% {
 transform: translateX(-50%) translateY(calc(sin(180deg) * 20px));
 }
 100% {
 transform: translateX(-100%) translateY(calc(sin(360deg) * 20px));
 }
}

في هذا المثال، تستخدم الرسوم المتحركة `wave` دالة `sin()` لحساب الموضع الرأسي (`translateY`) للعنصر `.wave-item`. مع تقدم الرسوم المتحركة، تتغير قيمة الجيب، مما يخلق تأثير موجة سلس ومتموج. يضمن `translateX` حركة موجة مستمرة.

3. إنشاء أقواس ومنحنيات متجاوبة

يمكن دمج الدوال المثلثية في CSS مع وحدات العرض (مثل `vw` و `vh`) لإنشاء أقواس ومنحنيات متجاوبة تتكيف مع أحجام الشاشات المختلفة.

كود HTML:

<div class="arc-container">
 <div class="arc-element"></div>
</div>

كود CSS:

.arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}

في هذا المثال، نستخدم خصائص CSS المخصصة (`--angle`) والدوال المثلثية لتحديد موضع `.arc-element` على طول قوس. يتم حساب خصائص `left` و `top` بناءً على `cos()` و `sin()` على التوالي، مع تغير الزاوية بمرور الوقت من خلال الرسوم المتحركة `arc`. تضمن وحدات العرض (`vw` و `vh`) أن القوس يتكيف بشكل متناسب مع حجم الشاشة.

4. حساب المسافات باستخدام `atan2()`

يمكن لـ `atan2()` تحديد الزاوية بين نقطتين، وهو أمر مفيد لإنشاء تأثيرات تتفاعل فيها العناصر مع مواضع بعضها البعض.

لنفترض أن لديك عنصرين، وتريد تدوير أحدهما ليشير دائمًا نحو الآخر:

كود HTML:

<div class="container">
 <div class="target">Target</div>
 <div class="pointer">Pointer</div>
</div>

كود CSS (مع JavaScript):

.container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* مهم للدوران الصحيح */
}

كود JavaScript:

const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.getBoundingClientRect();

 const centerX = containerRect.left + containerRect.width / 2;
 const centerY = containerRect.top + containerRect.height / 2;

 const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});

في هذا المثال، يتم استخدام JavaScript للحصول على إحداثيات الفأرة بالنسبة للحاوية. تحسب دالة `Math.atan2()` الزاوية بين مركز الحاوية (الذي يعمل كنقطة الأصل) وموضع الفأرة. ثم تُستخدم هذه الزاوية لتدوير عنصر `.pointer`، مما يضمن أنه يشير دائمًا نحو مؤشر الفأرة. الخاصية `transform-origin: left center;` حاسمة لضمان دوران المؤشر بشكل صحيح حول نقطة مركزه اليسرى.

فوائد استخدام الدوال المثلثية في CSS

اعتبارات وأفضل الممارسات

الخاتمة

توفر الدوال المثلثية في CSS مجموعة أدوات قوية لإنشاء تصميمات ويب ديناميكية ومتجاوبة ودقيقة رياضيًا. من خلال فهم واستخدام هذه الدوال، يمكن للمطورين إطلاق إمكانيات جديدة للتخطيط والرسوم المتحركة والعناصر التفاعلية، مما يعزز تجربة المستخدم بشكل كبير. من التخطيطات الدائرية والرسوم المتحركة الشبيهة بالأمواج إلى الأقواس المتجاوبة وتحديد مواضع العناصر، فإن التطبيقات واسعة ومتنوعة. في حين أن النظر بعناية في توافق المتصفحات والأداء وسهولة القراءة أمر ضروري، فإن فوائد دمج الدوال المثلثية في سير عمل CSS الخاص بك لا يمكن إنكارها، مما يسمح لك بإنشاء تجارب ويب جذابة ومتطورة حقًا. مع استمرار تطور CSS، سيصبح إتقان هذه التقنيات ذا قيمة متزايدة لمصممي ومطوري الويب في جميع أنحاء العالم.

تسمح هذه المعرفة بتصميمات أكثر تعقيدًا وجاذبية بصرية. استكشف هذه التقنيات وجرب معايير مختلفة لإطلاق العنان للإمكانات الكاملة للدوال المثلثية في CSS في مشاريع تطوير الويب الخاصة بك.