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 >
|
Output:
Supported browsers: The browsers supported by acos() function are listed below:
Share your thoughts in the comments
Please Login to comment...