このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
atan2()
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月.
atan2() はCSS の関数で、-infinity からinfinity までの 2 つの値の逆タンジェントを返す三角関数です。この関数は 2 つの引数を受け入れ、-180deg から180deg までの<angle> を返します。
構文
/* 2 つの <number> 値 */transform: rotate(atan2(3, 2));/* 2 つの <dimension> 値 */transform: rotate(atan2(1rem, -0.5rem));/* 2 つの <percentage> 値 */transform: rotate(atan2(20%, -30%));/* その他の値 */transform: rotate(atan2(pi, 45));transform: rotate(atan2(e, 30));引数
atan2(y, x) 関数は、カンマで区切られた 2 つの値を引数として受け入れます。それぞれの値は、<number>、<dimension>、<percentage> のいずれかです。両方の値は同じ型である必要がありますが、<dimension> の場合は、単位が異なっていてもかまいません (例:atan2(100px, 5vw) は有効です)。
yこの点の y 座標。
<number>、<dimension>、<percentage>のいずれかに解決される計算式。xこの点の x 座標。
<number>、<dimension>、<percentage>のいずれかに解決される計算式。
返値
2 つの値x およびy が指定された場合、関数atan2(y, x) は、正の x 軸と原点から点(x, y) までの光線の間の<angle> を計算して返します。
形式文法
<atan2()> =
atan2(<calc-sum> ,<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
例
要素の回転
atan2() 関数は<angle> を返すので、要素の回転 (rotate) に使用することができます。
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;}div.box { width: 100px; height: 100px; background: linear-gradient(orange, red);}div.box-1 { transform: rotate(atan2(3, 2));}div.box-2 { transform: rotate(atan2(3%, -2%));}div.box-3 { transform: rotate(atan2(-1, 0.5));}div.box-4 { transform: rotate(atan2(1, 0.5));}div.box-5 { transform: rotate(atan2(1rem, -0.5rem));}結果
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |