The inverse tangent of two values between -infinity and infinity is returned by the trigonometric atan2() CSS function. The function returns the number of radians representing an angle between -180deg and 180deg and takes two arguments.
Syntax:
/* numeric values */ transform: rotate(atan2(5, 1)); /* Dimensional values */ transform: rotate(atan2(12rem, -1.5rem)); /* Percentage values */ transform: rotate(atan2(40%, -50%)); /* Other values */ transform: rotate(atan2(pi, 30)); transform: rotate(atan2(e, 20));
Parameter: The atan2(y, x) function takes the following parameters:
- y: It represents the y coordinate of the point, which indicates a calculation for resolving a number, a dimension, or a percentage.
- x: It represents the x coordinate of the point which indicates a calculation for resolving a number, a dimension, or a percentage.
Return Value: The function atan2(y, x) determines and returns the angle between the positive x-axis and the ray from the origin to the point given two points x and y. (x, y).
Example 1: In this example, we will understand how the atan2() function works.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(atan2(5, 1));
}
div.heading-2 {
transform: rotate(atan2(12rem, -1.5rem));
}
div.heading-3 {
transform: rotate(atan2(40%, -50%));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>atan2() function</h2>
<div class="heading heading-1">
GeeksforGeeks
</div>
<div class="heading heading-2">
GeeksforGeeks
</div>
<div class="heading heading-3">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
Example 2: This is another example that illustrates how atan2() function works.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(atan2(pi, 45));
}
div.heading-2 {
transform: rotate(atan2(e, 30));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>atan2() function</h2>
<div class="heading heading-1">
GeeksforGeeks
</div>
<div class="heading heading-2">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
Supported browsers: The browsers supported by atan2() function are listed below:
- Firefox 16.0
- Safari