View in EnglishAlways switch to English

asin()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月.

CSS 函数asin() 为三角函数，返回介于-1 和1 之间的数的反正弦值。此函数含有单个计算式，此式返回表示介于-90deg 和90deg 之间的<angle> 的弧度数。

语法

css

/* 单个 <number> 值 */transform: rotate(asin(-0.2));transform: rotate(asin(2 * 0.125));/* 其他值 */transform: rotate(asin(pi / 5));transform: rotate(asin(e / 3));

参数

asin(number) 函数仅接受一值作为其参数。

number: 解析为介于-1 和1 之间的<number> 的计算式。

返回值

number 的反正弦值总将返回介于-90deg 和90deg 之间的<angle>。

若number 小于-1 或大于1，则结果为NaN。
若number 为0⁻，则结果为0⁻。

形式语法

<asin()> =
asin(<calc-sum>)

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

示例

旋转元素

由于asin() 函数返回<angle>，故可用于旋转（rotate）元素。

HTML

html

<div></div><div></div><div></div><div></div><div></div>

CSS

body {  height: 100vh;  display: flex;  justify-content: center;  align-items: center;  gap: 50px;}

css

div.box {  width: 100px;  height: 100px;  background: linear-gradient(orange, red);}div.box-1 {  transform: rotate(asin(1));}div.box-2 {  transform: rotate(asin(0.5));}div.box-3 {  transform: rotate(asin(0));}div.box-4 {  transform: rotate(asin(-0.5));}div.box-5 {  transform: rotate(asin(-1));}