CSS types.asin() Function

Last Updated : 01 Feb, 2023

The inverse sine of an integer between -1 and 1 is returned by the trigonometric asin() CSS function. The single computation in the function yields the number of radians that correspond to an angle between -90deg and 90deg.

Syntax:

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

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

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 sine of a number that will lie in between -90deg and 90deg.

The result will be NaN if the number is less than -1 or greater than 1.
The result will be 0⁻ if the number is 0⁻.

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