css.in.ua
Підтримати

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) у декартовій системі координат.

Порада:

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

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

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

Синтаксис

atan2(y, x);
<number>

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

Переглядачі

Переглядач

111

108

15.4

97

111
Переглядач

111

111

108

15.4

Мобільних переглядачів ще не додано.

Приклади


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

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

Спільнота

Зв'язок