CSS atan() 関数

定義と使用方法

CSSの atan() 関数は、-∞ から ∞ までの数値の逆三角関数を返します。

数字の逆三角関数は、-90 から 90 度までの角度を返します。

いくつかの例：

  • atan(-1) は -45 度を示します
  • atan(0) は 0 度を示します
  • atan(1) は 45 度を示します
  • atan(-∞) は -90 度を示します
  • atan(∞) は 90 度を示します

例

使用 atan() 回転する要素：

div.a {
  transform: rotate(atan(500));
}
div.b {
  transform: rotate(atan(1));
}
div.c {
  transform: rotate(atan(0));
}
div.d {
  transform: rotate(atan(-5000));
}

実際に試してみる

CSS 语法

atan(number)
値 説明
number 必須。-∞ から ∞ までの数値。

技術詳細

バージョン： CSS4

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
111 111 108 15.4 97

関連ページ

参考：CSS acos() 関数

参考：CSS asin() 函数

参考：CSS atan2() 函数

参考：CSS calc() 関数

参考：CSS cos() 関数

参考：CSS exp() 関数

参考：CSS hypot() 関数

参考：CSS log() 関数

参考：CSS mod() 関数

参考：CSS pow() 関数

参考：CSS sin() 函数

参考：CSS sqrt() 函数

参考：CSS tan() 函数