CSS types.atan2() Function

Last Updated : 24 Apr, 2025

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>