CSS function atan2


Опис

Функція atan2() є корисною для визначення кутів та напрямків в геометрії та комп'ютерній графіці. Вона приймає два аргументи: y та x, які представляють координати точки (x, y).

Значення, повернене функцією atan2(), вимірюється в радіанах та належить діапазону від до π. Вона повертає арктангенс відношення y / x враховуючи знаки обох координат, що дозволяє коректно визначити кут між точкою (x, y) та позитивним напрямком осі X.

Ця функція особливо корисна при визначенні повороту елементів, руху об'єктів або розташуванні їх у просторі, зокрема при анімації та трансформаціях на веб-сторінках.

Функція atan2() може обробляти різні комбінації значень y та x, включаючи:

  • y > 0, x > 0: точка знаходиться в першому квадранті.
  • y > 0, x < 0: точка знаходиться в другому квадранті.
  • y < 0, x < 0: точка знаходиться в третьому квадранті.
  • y < 0, x > 0: точка знаходиться в четвертому квадранті.
  • y = 0, x ≠ 0: точка знаходиться на позитивній або негативній півосьові x.
  • y ≠ 0, x = 0: точка знаходиться на позитивній або негативній півосьові y.
  • y = 0, x = 0: точка знаходиться в початку координат.

Зауважте, що значення y та x мають відношення до конкретних координат точки (x, y) у декартовій системі координат.

автор: Bond

Порада

Пам'ятайте, що аргумент x повинен бути переданий першим, а потім аргумент y, при виклику функції atan2(). Порядок аргументів важливий, оскільки він визначає результат.

автор: Bond
Порада

Використовуйте функцію atan2() разом з іншими CSS властивостями, такими як transform або animation, щоб створити гарну анімацію.

автор: Bond
Порада

Пам'ятайте, що значення, повернене функцією atan2(), вимірюється в радіанах. Якщо вам потрібно використовувати кути в градусах, можете перетворити значення, використовуючи формулу deg = rad * (180 / π)

автор: Bond

Синтаксис

atan2(y, x);

Функція atan2 може отримувати єдине значення:

<number>

Обидва аргументи можуть мати дійсні числові значення, включаючи позитивні, від'ємні та нульові значення.

автор: Bond

Значення без задання: (0, 1)

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE
111 108 15.4 97 111
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
111 111 108 15.4

Приклади

+ запропонувати свій приклад у пісочниці

Цей приклад ілюструє динамічну зміну елемента при наведенні курсору за допомогою CSS-функції atan2().

автор: Bond

Цей приклад показує статичну зміну повороту елемента за допомогою CSS-функції atan2().

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід