CSS types.atan() Function

Last Updated : 03 Feb, 2023

The trigonometric atan() CSS function returns the inverse tangent of a value between -∞ and +∞. The single calculation in the function returns the number of radians that correspond to an angle between -90deg and 90deg.

Syntax:

/* numeric values */
transform: rotate(atan(-0.9));
transform: rotate(atan(1));

/* Other values */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e / 4));

Parameter: This function takes the following parameters:

number: This is the numeric value translated from -∞ to +∞.

Return Value: The inverse tan of a number will always return an angle between -90deg and 90deg.

If number is 0⁻, the result is 0⁻.
If number is +∞ the result is 90deg.
If number is -∞ the result is -90deg.

Example 1: Let’s take an example to understand how the atan() 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(atan(0.1)); 
        } 
        div.heading-2 { 
          transform: rotate(atan(0.2)); 
        } 
        div.heading-3 { 
          transform: rotate(atan(1)); 
        } 
        div.heading-4 { 
          transform: rotate(atan(-0.2)); 
        } 
        div.heading-5 { 
          transform: rotate(atan(-0.1)); 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h2>atan() function</h2> 
    <div class="heading heading-1">GeeksforGeeks</div> 
    <div class="heading heading-2">GeeksforGeeks</div> 
    <div class="heading heading-3">GeeksforGeeks</div> 
    <div class="heading heading-4">GeeksforGeeks</div> 
    <div class="heading heading-5">GeeksforGeeks</div> 
</body> 
</html> 

Output:

Example 2: Let’s take an example to understand how the atan() function works using pi and e values.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
        div.heading { 
          width: 100px; 
          height: 30px; 
          color: green; 
          padding: 30px; 
        } 
        div.heading-1 { 
          transform: rotate(atan(pi/8)); 
        } 
        div.heading-2 { 
          transform: rotate(atan(e/5)); 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h2>atan() function</h2> 
    <div class="heading heading-1">GeeksforGeeks</div> 
    <div class="heading heading-2">GeeksforGeeks</div> 
</body> 
</html> 