Open In App

CSS types.asin() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

 

Supported browsers: The browsers supported by asin() function are listed below:

  • Firefox 16.0
  • Safari 15.4


Last Updated : 01 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads