CSS Function - asin()

The CSS function asin() is a trigonometric operation that calculates the inverse sine of a value in the range -1 and 1.

This function performs a single calculation and returns the number of radians representing a <angle> value between -90° and 90°.

Possible values

The asin(number) function allows only a single value as a parameter.

  • number - A computation resulting in a number that falls within the range of -1 to 1.

Return Value

The inverse sine of a number always results in <angle> in the range of -90deg to 90deg.

  • If the number is less than -1 or greater than 1, the result is NaN.

  • If number is 0⁻, the result is 0⁻.

Syntax

asin( <calc-sum> )

CSS asin() - Rotate Element

The following example demonstrates the usage of asin() function.

 
<html>
<head>
<style>
   div.box {
      width: 100px;
      height: 100px;
      background-color: gray;
      text-align:center;
      font-size:30px;
   }
   div.boxA {
      transform: rotate(asin(1));
      margin-bottom: 20px;
      margin-left:20px; 
   }
   div.boxB {
      transform: rotate(asin(0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxC {
      transform: rotate(asin(0));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxD {
      transform: rotate(asin(-0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxE {
      transform: rotate(asin(-1));
      margin-bottom: 20px;
      margin-left:20px;
   }
</style>
</head>
<body>
   <div class="box boxA">A</div>
   <div class="box boxB">B</div>
   <div class="box boxC">C</div>
   <div class="box boxD">D</div>
   <div class="box boxE">E</div>
</body>
</html>
Advertisements