atan2() в CSS — кут до точки за координатами y і x
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Пам'ятайте, що аргумент
автор: Bondxповинен бути переданий першим, а потім аргументy, при виклику функціїatan2(). Порядок аргументів важливий, оскільки він визначає результат. - Порада
-
Використовуйте функцію
автор: Bondatan2()разом з іншими CSS властивостями, такими якtransformабоanimation, щоб створити гарну анімацію. - Порада
-
Пам'ятайте, що значення, повернене функцією
автор: Bondatan2(), вимірюється в радіанах. Якщо вам потрібно використовувати кути в градусах, можете перетворити значення, використовуючи формулуdeg = rad * (180 / π)
Синтаксис
atan2(y, x);Функція atan2 може отримувати єдине значення:
-
<number> -
Обидва аргументи можуть мати дійсні числові значення, включаючи позитивні, від'ємні та нульові значення.
автор: Bond
| Значення без задання: | (0, 1) |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 108 | 15.4 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 108 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад ілюструє динамічну зміну елемента при наведенні курсору за допомогою CSS-функції atan2().
HTML
<div class="container">
<div id="description">
<h2>Приклад 1: зміна елемента при наведенні курсору</h2>
<p>Цей приклад ілюструє динамічну зміну елемента при наведенні курсору за допомогою CSS-функції atan2().</p>
</div>
<div id="result">
<div class="box"></div>
</div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
text-align: left;
font-family: Arial, sans-serif;
margin-bottom: 50px;
}
#description h2 {
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
transition: transform 0.3s;
}
.box:hover {
transform: rotate(atan2(1, 1));
}Цей приклад показує статичну зміну повороту елемента за допомогою CSS-функції atan2().
HTML
<div class="container">
<div id="description">
<h2>Приклад 2</h2>
<p>Цей приклад показує статичну зміну повороту елемента за допомогою CSS-функції atan2().</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box rotated"></div>
</div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
text-align: left;
font-family: Arial, sans-serif;
margin-bottom: 50px;
}
#description h2 {
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: space-around;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
}
.box.rotated {
background-color: orange;
transform: rotate(atan2(1, -1));
}Чотири промені з одного кута коробки: кожен націлений на свій протилежний кут через rotate: atan2(…), довжина взята з hypot(). Далі — коло з восьми стрілок, кожна з яких обчислює власний напрямок із пари координат, потім чотири квадранти зі знаками аргументів, і невалідний atan2(10px, 10) із мішаними типами, який лишає стрілку неповернутою.
HTML
<p class="head">Промінь націлений у протилежний кут: rotate: atan2(--dy, --dx)</p>
<div class="row">
<div class="box r1"><span class="ray"></span></div>
<div class="box r2"><span class="ray"></span></div>
<div class="box r3"><span class="ray"></span></div>
</div>
<p class="head">Вісім стрілок, кожна рахує свій напрямок сама:</p>
<div class="dial">
<span class="arrow d0"></span><span class="arrow d1"></span>
<span class="arrow d2"></span><span class="arrow d3"></span>
<span class="arrow d4"></span><span class="arrow d5"></span>
<span class="arrow d6"></span><span class="arrow d7"></span>
</div>
<p class="head">Знаки аргументів дають повне коло — 45°, 135°, −135°, −45°:</p>
<div class="row">
<div class="q"><span class="qa q1"></span><em>atan2(1, 1)</em></div>
<div class="q"><span class="qa q2"></span><em>atan2(1, -1)</em></div>
<div class="q"><span class="qa q3"></span><em>atan2(-1, -1)</em></div>
<div class="q"><span class="qa q4"></span><em>atan2(-1, 1)</em></div>
</div>
<p class="head">Мішані типи — оголошення відкинуто, стрілка лишилась горизонтальною:</p>
<div class="row">
<div class="q"><span class="qa bad"></span><em>atan2(10px, 10)</em></div>
</div>CSS
.head {
margin: 20px 0 8px;
color: #5a6472;
font-size: .9em;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: flex-start;
}
.box {
position: relative;
width: 200px;
background:
linear-gradient(to top 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;
top: 0;
height: 6px;
background: rgba(47, 111, 208, .8);
transform-origin: left top;
rotate: atan2(var(--dy), var(--dx));
width: calc(hypot(var(--dx), var(--dy)) * 1px);
}
.r1 { height: 60px; --dx: 200; --dy: 60; }
.r2 { height: 130px; --dx: 200; --dy: 130; }
.r3 { height: 200px; --dx: 200; --dy: 200; }
.dial {
position: relative;
width: 260px;
height: 260px;
margin-left: 20px;
background: #f6f9ff;
border: 1px solid #b9c6d8;
border-radius: 50%;
}
.arrow {
position: absolute;
left: 130px;
top: 126px;
width: 110px;
height: 8px;
background: #2f6fd0;
transform-origin: left center;
rotate: atan2(var(--dy), var(--dx));
}
.d0 { --dx: 4; --dy: 0; background: #c0392b; }
.d1 { --dx: 3; --dy: 3; }
.d2 { --dx: 0; --dy: 4; }
.d3 { --dx: -3; --dy: 3; }
.d4 { --dx: -4; --dy: 0; }
.d5 { --dx: -3; --dy: -3; }
.d6 { --dx: 0; --dy: -4; }
.d7 { --dx: 3; --dy: -3; }
.q {
position: relative;
width: 150px;
height: 150px;
background: #f6f9ff;
border: 1px solid #b9c6d8;
}
.q em {
position: absolute;
left: 6px;
bottom: 4px;
color: #5a6472;
font: 12px/1 ui-monospace, monospace;
}
.qa {
position: absolute;
left: 74px;
top: 71px;
width: 66px;
height: 8px;
background: #3a9a4f;
transform-origin: left center;
}
.q1 { rotate: atan2(1, 1); }
.q2 { rotate: atan2(1, -1); }
.q3 { rotate: atan2(-1, -1); }
.q4 { rotate: atan2(-1, 1); }
.bad {
background: #d64545;
rotate: atan2(10px, 10);
}Коментарі
Коментарів ще немає — будьте першим!