CSS asin() Function

CSS asin() Function

The CSS asin() function calculates the inverse sine of a number and returns an angle. It is useful for mathematical calculations, rotations, and CSS effects that require an angle derived from a numeric ratio.

Syntax

asin(number)

The asin() function accepts one number between -1 and 1 and returns an angle.

For example:

transform: rotate(asin(0.5));

The expression asin(0.5) returns 30deg, so the element rotates 30 degrees.

The function also accepts mathematical expressions:

transform: rotate(asin(1 / 2));

The division evaluates to 0.5, producing the same 30-degree rotation.

The returned angle can be used in CSS properties and functions that accept angle values.

Parameters

The asin() function accepts one argument.

The argument represents a sine value, not an angle.

Valid examples include:

asin(1)
asin(0.5)
asin(0)
asin(-0.5)
asin(-1)
asin(var(--sine-value))

The function requires exactly one argument. Multiple comma-separated arguments are invalid.

Values outside the range -1 to 1 produce a NaN result.

How It Works

The asin() function performs the inverse of the sine function within the angle range from -90 to 90 degrees.

The sine function calculates a number from an angle:

sin(30deg)  /* 0.5 */

The inverse sine function performs the opposite calculation:

asin(0.5)  /* 30deg */

For a right triangle, the sine of an acute angle is the ratio of the opposite side to the hypotenuse.

For example, if the opposite side is 50 units and the hypotenuse is 100 units, the sine ratio is 0.5.

asin(50 / 100)  /* 30deg */

The result is an angle of 30 degrees.

Negative sine values produce negative angles within the function's return range.

asin(-0.5)  /* -30deg */

Unlike sin(), which returns a number, asin() returns an angle.

Because several angles can share the same sine value, asin() returns the principal angle between -90deg and 90deg.

Return Values

The asin() function returns an angle between -90deg and 90deg, inclusive, for valid inputs.

The angle may also be expressed using other CSS angle units.

For example, asin(1) is equivalent to 90deg, 0.25turn, or approximately 1.5708rad.

The function preserves the sign of zero, so a negative zero input produces a negative zero angle.

Using Calculations

The asin() function can evaluate mathematical expressions to calculate angles from numeric ratios.

For example:

.example {
  transform: rotate(asin(3 / 5));
}

The ratio 3 / 5 equals 0.6, producing a rotation of approximately 36.87deg.

You can also combine asin() with calc():

.example {
  transform: rotate(asin(calc(3 / 5)));
}

This produces the same result. The additional calc() wrapper is optional.

Compatible length values can be divided to obtain a unitless ratio:

.example {
  transform: rotate(asin(50px / 100px));
}

The length units cancel, producing 0.5 and a rotation of 30deg.

When using calculations, ensure that the resulting ratio remains between -1 and 1.

Using Custom Properties

CSS custom properties can supply the numeric value used by asin().

For example:

:root {
  --sine-value: 0.5;
}
.example {
  transform: rotate(asin(var(--sine-value)));
}

The custom property contains 0.5, so the resulting rotation is 30deg.

Changing the custom property changes the calculated angle.

:root {
  --sine-value: 1;
}

The resulting rotation becomes 90deg.

You can also calculate a ratio from two custom properties:

:root {
  --opposite: 50;
  --hypotenuse: 100;
}
.example {
  transform: rotate(asin(var(--opposite) / var(--hypotenuse)));
}

The ratio is 0.5, producing a 30-degree rotation.

This approach is useful when a component's values change and its angle needs to be recalculated.

Example

The following example demonstrates how different sine values produce different rotation angles.

Each blue line uses asin() to calculate its rotation.

HTML:

<div class="asin-demo">
  <div class="asin-row">
    <span>asin(1) = 90deg</span>
    <div class="asin-line asin-one"></div>
  </div>
  <div class="asin-row">
    <span>asin(0.5) = 30deg</span>
    <div class="asin-line asin-two"></div>
  </div>
  <div class="asin-row">
    <span>asin(0) = 0deg</span>
    <div class="asin-line asin-three"></div>
  </div>
  <div class="asin-row">
    <span>asin(-0.5) = -30deg</span>
    <div class="asin-line asin-four"></div>
  </div>
  <div class="asin-row">
    <span>asin(-1) = -90deg</span>
    <div class="asin-line asin-five"></div>
  </div>
</div>

CSS:

.asin-demo {
  display: grid;
  gap: 12px;
}
.asin-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 100px;
}
.asin-row span {
  width: 200px;
  flex-shrink: 0;
}
.asin-line {
  width: 90px;
  height: 8px;
  background-color: #0066cc;
  transform-origin: center;
}
.asin-one {
  transform: rotate(90deg);
  transform: rotate(asin(1));
}
.asin-two {
  transform: rotate(30deg);
  transform: rotate(asin(0.5));
}
.asin-three {
  transform: rotate(0deg);
  transform: rotate(asin(0));
}
.asin-four {
  transform: rotate(-30deg);
  transform: rotate(asin(-0.5));
}
.asin-five {
  transform: rotate(-90deg);
  transform: rotate(asin(-1));
}

The lines rotate by 90, 30, 0, -30, and -90 degrees based on their sine values.

Positive angles rotate clockwise in the default CSS coordinate system, while negative angles rotate counterclockwise.

Fixed-angle fallback declarations are included for browsers that do not support asin().

Related Trigonometric Functions

CSS provides several trigonometric functions for converting between angles and numeric ratios.

For example, sin(30deg) returns 0.5, while asin(0.5) returns 30deg.

The asin() function returns angles only within its principal range, even though the sine function can produce the same numeric result for other angles.

Common Uses

The asin() function is useful for CSS calculations involving angles and proportional measurements.

For example:

.example {
  transform: rotate(asin(0.75));
}

This rotates the element by approximately 48.59deg.

Limitations

The asin() function has several important limitations.

• It accepts exactly one numeric expression.
• The argument must resolve to a unitless number.
• Values outside the range -1 to 1 produce NaN.
• The returned angle is restricted to the range -90deg through 90deg.
• It cannot directly accept strings or colors.
• Its result must be used in a CSS context that accepts angles.
• Older browsers may not support the function.

For example:

transform: rotate(asin(0.5));

This is valid because rotate() accepts an angle.

However:

width: asin(0.5);

This is invalid because width does not accept an angle.

The following expression produces NaN because its argument is outside the valid range:

transform: rotate(asin(2));

For predictable results, ensure that the input stays between -1 and 1.

Browser Support

The asin() function is Baseline Widely available and has been supported across major browser engines since March 2023.

Older browsers may not recognize CSS trigonometric functions. Fixed-angle fallback values can help maintain a usable appearance.

.example {
  transform: rotate(30deg);
  transform: rotate(asin(0.5));
}

Browsers that support asin() use the calculated angle. Browsers that do not support it retain the earlier valid declaration.

You can also check support using @supports:

@supports (transform: rotate(asin(0.5))) {
  .example {
    transform: rotate(asin(0.5));
  }
}

For current compatibility information, visit Can I Use? and search for CSS trigonometric functions.

Specifications

The asin() function is defined in the CSS Values and Units Module Level 4 .

The specification defines asin() as an inverse trigonometric function that returns an angle between -90 and 90 degrees.

Related functions include acos(), atan(), atan2(), cos(), sin(), and tan().