CSS types.acos() Function

Last Updated : 01 Feb, 2023

The trigonometric acos() function in the CSS gives the inverse cosine of a value between -1 and 1. The single computation in the function yields the number of radians that correspond to an angle between 0 and 180 degrees.

Syntax:

/* numeric values */
transform: rotate(acos(-0.5));
transform: rotate(acos(4 * 0.256));

/* Other values */
transform: rotate(acos(pi / 2));
transform: rotate(acos(e / 6));

Parameter: This function accepts a single parameter:

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

Return Value: It will return an angle for the inverse cosine of a number that will lie in between 0deg and 180deg.

The result is NaN if the number is less than -1 or greater than 1.
The result is 0 if the number is exactly 1.

Example 1: This example describes how the acos() 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(acos(0.1)); 
        } 
          
        div.heading-2 { 
          transform: rotate(acos(0.2)); 
        } 
          
        div.heading-3 { 
          transform: rotate(acos(1)); 
        } 
          
        div.heading-4 { 
          transform: rotate(acos(-0.2)); 
        } 
          
        div.heading-5 { 
          transform: rotate(acos(-0.1)); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h2>acos() 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: This is another example to understand how the acos() 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(acos(pi/8)); 
        } 
        div.heading-2 { 
          transform: rotate(acos(e/5)); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h2>acos() function</h2> 
    <div class="heading heading-1"> 
        GeeksforGeeks 
    </div> 
    <div class="heading heading-2"> 
        GeeksforGeeks 
    </div> 
</body> 
  
</html>