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 را بررسی کنیم.

۱. ایجاد یک طرح‌بندی دایره‌ای

یکی از موارد استفاده رایج، چیدمان عناصر به صورت دایره‌ای است. این کار را می‌توان با محاسبه موقعیت هر عنصر بر اساس شاخص آن و تعداد کل عناصر، با استفاده از `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` برای جبران اندازه آیتم است.

۲. ایجاد انیمیشن‌های موج‌مانند

توابع مثلثاتی برای ایجاد انیمیشن‌های روان و موج‌مانند عالی هستند. می‌توانید از `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` حرکت مداوم موج را تضمین می‌کند.

۳. ایجاد قوس‌ها و منحنی‌های واکنش‌گرا

توابع مثلثاتی 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`) تضمین می‌کنند که قوس به طور متناسب با اندازه صفحه نمایش سازگار شود.

۴. محاسبه فواصل با `atan2()`

`atan2()` می‌تواند زاویه بین دو نقطه را تعیین کند، که برای ایجاد افکت‌هایی که در آن عناصر به موقعیت یکدیگر واکنش نشان می‌دهند، مفید است.

سناریویی را در نظر بگیرید که در آن دو عنصر دارید و می‌خواهید یکی را طوری بچرخانید که همیشه به سمت دیگری اشاره کند:

HTML:

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

CSS (با جاوا اسکریپت):

.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; /* Important for correct rotation */
}

جاوا اسکریپت:

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)`;
});

در این مثال، از جاوا اسکریپت برای دریافت مختصات ماوس نسبت به کانتینر استفاده می‌شود. `Math.atan2()` زاویه بین مرکز کانتینر (که به عنوان مبدأ عمل می‌کند) و موقعیت ماوس را محاسبه می‌کند. سپس این زاویه برای چرخاندن عنصر `.pointer` استفاده می‌شود، تا اطمینان حاصل شود که همیشه به سمت مکان‌نمای ماوس اشاره می‌کند. `transform-origin: left center;` برای اطمینان از اینکه اشاره‌گر به درستی حول نقطه مرکزی چپ خود می‌چرخد، بسیار مهم است.

مزایای استفاده از توابع مثلثاتی در CSS

ملاحظات و بهترین شیوه‌ها

نتیجه‌گیری

توابع مثلثاتی CSS مجموعه ابزار قدرتمندی را برای ایجاد طراحی‌های وب پویا، واکنش‌گرا و دقیق از نظر ریاضی فراهم می‌کنند. با درک و استفاده از این توابع، توسعه‌دهندگان می‌توانند امکانات جدیدی برای طرح‌بندی، انیمیشن و عناصر تعاملی باز کنند و تجربه کاربری را به طور قابل توجهی بهبود بخشند. از طرح‌بندی‌های دایره‌ای و انیمیشن‌های موج‌مانند گرفته تا قوس‌های واکنش‌گرا و موقعیت‌یابی عناصر، کاربردها گسترده و متنوع هستند. در حالی که توجه دقیق به سازگاری مرورگر، عملکرد و خوانایی ضروری است، مزایای گنجاندن توابع مثلثاتی در جریان کاری CSS شما غیرقابل انکار است و به شما امکان می‌دهد تجربیات وب واقعاً جذاب و پیچیده‌ای ایجاد کنید. با ادامه تکامل CSS، تسلط بر این تکنیک‌ها برای طراحان و توسعه‌دهندگان وب در سراسر جهان به طور فزاینده‌ای ارزشمند خواهد شد.

این دانش امکان طراحی‌های پیچیده‌تر و از نظر بصری جذاب‌تری را فراهم می‌کند. این تکنیک‌ها را کاوش کنید و با پارامترهای مختلف آزمایش کنید تا پتانسیل کامل توابع مثلثاتی CSS را در پروژه‌های توسعه وب خود آزاد کنید.