CSS types.atan2() Function

Last Updated : 01 Feb, 2023

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>