このページはコミュニティーの尽力で英語から翻訳されました。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月.
acos() はCSS の関数で、-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) 関数は、引数として 1 つの値のみを受け入れます。
返値
number の逆余弦で、常に<angle> であり、0deg と180deg の間です。
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></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(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 |