# acos()

## Baseline2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

## 语法

css
``````/* 单个 <number> 值 */
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/* 其他值 */
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));
``````

### 参数

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

`number`

### 返回值

`number` 的反余弦值总将返回介于 `0deg``180deg` 之间的 `<angle>`

• `number` 小于 `-1` 或大于 `1`，则结果为 `NaN`
• `number` 恰为 `1`，则结果为 `0`

### 形式语法

`<acos()> =   acos( <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        `

## 示例

### 旋转元素

#### HTML

html
``````<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
``````

#### CSS

css
``````div.box {
width: 100px;
height: 100px;
}
div.box-1 {
transform: rotate(acos(1));
}
div.box-2 {
transform: rotate(acos(0.5));
}
div.box-3 {
transform: rotate(acos(0));
}
div.box-4 {
transform: rotate(acos(-0.5));
}
div.box-5 {
transform: rotate(acos(-1));
}
``````

## 规范

Specification
CSS Values and Units Module Level 4
# trig-funcs

## 浏览器兼容性

BCD tables only load in the browser