توابع مثلثاتی در CSS

سینوس، کسینوس، مماس و موارد دیگر را در CSS محاسبه کنید.

Bramus

توابع مثلثاتی

در CSS امکان نوشتن عبارات ریاضی وجود دارد. در پایه، تابع calc() برای انجام محاسبات قرار دارد، اما به احتمال زیاد شما نیز در مورد min() , max() و clamp() نیز شنیده اید.

توابع مثلثاتی sin() , cos() , tan() , asin() , acos() , atan() atan2() که به این توابع می پیوندند . این توابع در ماژول CSS Values ​​and Units Level 4 تعریف شده و در همه مرورگرها موجود است.

sin() ، cos() و tan()

سه تابع اصلی تریگ عبارتند از:

• cos() : کسینوس یک زاویه را برمی‌گرداند که مقداری بین -1 و 1 است.
• sin() : سینوس یک زاویه را که مقداری بین -1 و 1 است برمی‌گرداند.
• tan() : مماس یک زاویه را برمی‌گرداند که مقداری بین −∞ و +∞ است.

برخلاف همتایان جاوا اسکریپت خود، این توابع هر دو زاویه و رادیان را به عنوان آرگومان خود می پذیرند.

در دمو زیر، از این توابع برای ترسیم خطوطی که مثلث اطراف مجموعه --angle را تشکیل می دهند استفاده می شود:

• "هیپوتنوز" (خط زرد) خطی است از مرکز دایره تا موقعیت نقطه. طول آن برابر با --radius دایره است.
• "مجاور" (خط قرمز) خطی از مرکز دایره در امتداد محور X است. طول آن برابر است با --radius ضرب در کسینوس زاویه --angle .
• "مخالف" (خط آبی) خطی از مرکز نقطه در امتداد محور Y است. طول آن برابر است با --radius ضرب در سینوس --angle .
• تابع tan() --angle برای کشیدن خط سبز از نقطه به سمت محور X استفاده می شود.

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

قوس یا همتای معکوس sin() ، cos() و tan() به ترتیب asin() ، acos() و atan() می باشند. این توابع محاسبه را در جهت مخالف انجام می دهند: آنها یک مقدار عددی را به عنوان آرگومان خود می گیرند و زاویه مربوطه را برای آن برمی گردانند.

در نهایت atan2() وجود دارد که دو آرگومان A و B را می پذیرد. تابع زاویه بین محور X مثبت و نقطه (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 قرار دارد.

با مقدار محاسبه‌شده، می‌توان با استفاده از ویژگی‌های تبدیل فردی ، عناصر را به‌گونه‌ای بچرخانید که در مقابل یکدیگر قرار گیرند.

در مثال زیر، جعبه ها به گونه ای چرخانده شده اند که رو به محل قرارگیری ماوس باشند. موقعیت ماوس با یک ویژگی سفارشی از طریق جاوا اسکریپت همگام سازی می شود.

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

برجسته جامعه

همانطور که در این نوار متحرک موبیوس توسط Ana Tudor نشان داده شده است، cos() و sin() می توان برای چیزی بیش از ترجمه استفاده کرد. در اینجا از نتیجه آنها برای دستکاری مولفه های s و l تابع رنگ hsl() استفاده می شود.