CSS atan() — арктангенс числа як кут
Опис
atan() - функція в математичній бібліотеці, яка використовується для обчислення арктангенсу кута між віссю абсцис і прямою, що проходить через точку (0, 0) і задану пару координат (y, x). Результат виражений у радіанах.
Функція atan() дозволяє знайти кут між віссю абсцис і прямою, що проходить через точку з координатами (0, 0) та точку з координатами (y, x). Повернутий кут може бути від -\pi/2 до \pi/2. Додатні значення вказують на кути в першій та четвертій чвертях, тоді як від'ємні значення вказують на кути в другій та третій чвертях.
Наприклад, якщо аргумент y дорівнює нулю, аргумент x дорівнює 1 (за замовчуванням), функція atan() поверне нуль.
Декілька прикладів коректного використання функції atan():
atan(1, 1)- обчислює арктангенс для координат(1, 1);atan(0.5)- обчислює арктангенс для координат(0.5, 1)(за замовчуванням);atan(y / x)- обчислює арктангенс для координат, заданих зміннимиyтаx.
Функція atan() корисна для обчислення кутів, зокрема у випадках, коли потрібно визначити напрямок або поворот в елементах веб-сайту. Це дозволяє створити більш гнучкі та динамічні ефекти, що залежать від положення та розташування елементів на сторінці.
Загальний опис
автор: NagarD
- Нотатка
-
Зверніть увагу, що в аргументі
автор: Bondxнеобхідно вказувати ненульове значення, щоб уникнути ділення на нуль. Якщо ви хочете обчислити арктангенс за заданими значеннямиyтаx, переконайтеся, щоxне рівний нулю. - Нотатка
-
Пам'ятайте, що результат функції
автор: Bondatan()виражений у радіанах. Якщо вам потрібно вивести результат у градусах, використовуйте функціюdeg()для конвертації.
Синтаксис
atan(y, x);Функція atan може отримувати 2 значень:
-
<number> -
Аргументи
автор: Bondyтаxможуть бути будь-якими числовими значеннями, включаючи цілі числа, десяткові дроби та від'ємні числа. -
<expression> -
Аргументи
автор: Bondyтаxтакож можуть бути виразами, які обчислюються до числових значень.
| Значення без задання: | (0, 1) |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 108 | 15.4 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 108 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Він демонструє зміну повороту блоків в залежності від значення atan().
HTML
<div class="container">
<div id="description">
<h2>Приклад 2: зміна повороту блоків залежно від значення atan()</h2>
<p>Він демонструє зміну повороту блоків в залежності від значення atan().</p>
</div>
<div id="result">
<div class="box box0"><span>atan(0)</span></div>
<div class="box box1"><span>atan(1)</span></div>
<div class="box box2"><span>atan(2)</span></div>
</div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
text-align: left;
margin-bottom: 50px;
}
#description h2 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-family: Arial, sans-serif;
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: space-around;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: transform 0.5s;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.box0 {
transform: rotate(atan(0));
}
.box1 {
transform: rotate(atan(1));
}
.box2 {
transform: rotate(atan(2));
}Зміна повороту блоку при наведенні курсору.
HTML
<div class="container">
<div id="description">
<h2>Приклад 1: зміна повороту блоку при наведенні</h2>
<p>Зміна повороту блоку при наведенні курсору.</p>
</div>
<div id="result">
<div class="box"></div>
</div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
text-align: left;
margin-bottom: 50px;
}
#description h2 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-family: Arial, sans-serif;
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(atan(1));
}У кожній коробці намальовано справжню діагональ, а поверх неї лежить смуга, повернута на atan(--dy / --dx). Смуга лягає рівно на діагональ — це і є перевірка, що кут порахований правильно. Остання коробка показує помилку: в atan() передано довжину, оголошення відкинуто, і смуга лишилася горизонтальною.
HTML
<div class="row">
<figure>
<div class="box r1"><i class="ray"></i></div>
<figcaption>200 × 50 → atan(50 / 200) ≈ 14deg</figcaption>
</figure>
<figure>
<div class="box r2"><i class="ray"></i></div>
<figcaption>200 × 100 → atan(100 / 200) ≈ 26.6deg</figcaption>
</figure>
<figure>
<div class="box r3"><i class="ray"></i></div>
<figcaption>200 × 200 → atan(200 / 200) = 45deg</figcaption>
</figure>
<figure>
<div class="box r4"><i class="ray"></i></div>
<figcaption>200 × 300 → atan(300 / 200) ≈ 56.3deg</figcaption>
</figure>
<figure>
<div class="box bad"><i class="ray"></i></div>
<figcaption>atan(50px / 200px) — недійсне, повороту немає</figcaption>
</figure>
</div>
<p class="head">Той самий кут через atan2 — але з довжинами, які atan не приймає:</p>
<div class="row">
<figure>
<div class="box r2"><i class="ray a2"></i></div>
<figcaption>atan2(100px, 200px) ≈ 26.6deg — лягає так само</figcaption>
</figure>
</div>CSS
.row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.head {
margin: 20px 0 8px;
color: #5a6472;
font-size: .9em;
}
figure {
margin: 0;
width: 210px;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font: 12px/1.35 ui-monospace, monospace;
}
.box {
position: relative;
width: 200px;
background:
linear-gradient(to bottom right,
transparent calc(50% - 1px), #d64545 calc(50% - 1px),
#d64545 calc(50% + 1px), transparent calc(50% + 1px)),
#f6f9ff;
border: 1px solid #b9c6d8;
}
.ray {
position: absolute;
left: 0;
bottom: 0;
height: 6px;
background: rgba(47, 111, 208, .75);
transform-origin: left bottom;
rotate: atan(0 - var(--dy) / var(--dx));
}
.r1 { height: 50px; --dx: 200; --dy: 50; }
.r2 { height: 100px; --dx: 200; --dy: 100; }
.r3 { height: 200px; --dx: 200; --dy: 200; }
.r4 { height: 300px; --dx: 200; --dy: 300; }
.r1 .ray { width: calc(hypot(200, 50) * 1px); }
.r2 .ray { width: calc(hypot(200, 100) * 1px); }
.r3 .ray { width: calc(hypot(200, 200) * 1px); }
.r4 .ray { width: calc(hypot(200, 300) * 1px); }
.a2 {
rotate: calc(0deg - atan2(100px, 200px));
}
.bad {
height: 50px;
}
.bad .ray {
width: calc(hypot(200, 50) * 1px);
background: rgba(214, 69, 69, .75);
rotate: atan(50px / 200px);
}Коментарі
Коментарів ще немає — будьте першим!