このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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

<number> に解決される数式で、 -11 の間です。

返値

number の逆余弦で、常に <angle> であり、 0deg180deg の間です。

  • 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

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

ブラウザーの互換性

関連情報