CSS types.acos() Function
Last Updated : 28 Apr, 2025
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> Output:
Supported browsers: The browsers supported by acos() function are listed below: