此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
acos()
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 函数 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 的反余弦值总将返回介于 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
示例
旋转元素
由于 acos() 函数返回 <angle>,故可用于旋转(rotate)元素。
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
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(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 |
浏览器兼容性
Enable JavaScript to view this browser compatibility table.