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

View in English Always switch to English

atan()

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月⁩.

asin()CSS関数で、-∞ から +∞ までの数値の逆正接を返す三角関数です。この関数には、 -90deg から 90deg までの <angle> を表すラジアンの数を返す単一の計算が含まれています。

構文

css
/* 単一の <number> 値 */
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/* その他の値 */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));

引数

atan(number) 関数は、引数として 1 つの値のみを受け入れます。

number

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

返値

number の逆正接で、常に <angle> であり、 -90deg90deg の間です。

  • number0⁻ の場合、結果は 0⁻ になります。
  • number+∞ の場合、結果は 90deg になります。
  • number-∞ の場合、結果は -90deg になります。

すなわち、次の通りです。

  • atan(-infinity)-90deg になります。
  • atan(-1)-45deg になります。
  • atan(0)0deg になります。
  • atan(1)45deg になります。
  • atan(infinity)90deg になります。

形式文法

<atan()> = 
atan( <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

要素の回転

atan() 関数は <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(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}

結果

仕様書

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

ブラウザーの互換性

関連情報