Trigonometric functions (sin, cos, tan, etc.)
acos() は CSS の関数で、-1 から 1 までの数値の逆余弦を返す三角関数です。この関数には、 0deg から 180deg までの <angle> を返す単一の計算が含まれています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 111 | 111 | 108 | 15.4 | 111 | 15.4 | |
| asin() は CSS の関数で、-1 から 1 までの数値の逆正弦を返す三角関数です。この関数には、 -90deg から 90deg までの angle を返す単一の計算が含まれています。 | 111 | 111 | 108 | 15.4 | 111 | 15.4 |
| atan() は CSS の関数で、-∞ から +∞ までの数値の逆正接を返す三角関数です。この関数には、 -90deg から 90deg までの angle を返す単一の計算が含まれています。 | 111 | 111 | 108 | 15.4 | 111 | 15.4 |
| atan2() は CSS の関数で、 -infinity から infinity までの 2 つの値の逆タンジェントを返す三角関数です。この関数は 2 つの引数を受け入れ、-180deg から 180deg までの angle を返します。 | 111 | 111 | 108 | 15.4 | 111 | 15.4 |
| cos() は CSS の関数で、数値の余弦を返す三角関数です。値は -1 から 1 までの範囲になります。この関数には単一の計算が含まれており、引数の結果をラジアンとして解釈して、<number> または angle のいずれかに解決する必要があります。つまり、cos(45deg)、cos(0.125turn)、cos(3.14159 / 4) はすべて、ほぼ 0.707 という同じ値を表します。 | 111 | 111 | 108 | 15.4 | 111 | 15.4 |
| sin() は CSS の関数で、数値の正弦を返す三角関数です。値は -1 から 1 までの範囲になります。この関数には単一の計算が含まれており、引数の結果をラジアンとして解釈して、<number> または angle のいずれかに解決する必要があります。つまり、sin(45deg)、sin(0.125turn)、sin(3.14159 / 4) はすべて、ほぼ 0.707 という同じ値を表します。 | 111 | 111 | 108 | 15.4 | 111 | 15.4 |
| tan() は CSS の関数で、数値の正接を返す三角関数です。値は −infinity から infinity までの範囲になります。この関数には単一の計算が含まれており、引数の結果をラジアンとして解釈して、<number> または angle のいずれかに解決する必要があります。 | 111 | 111 | 108 | 15.4 | 111 | 15.4 |
基本構文
.circular-layout {
--items: 8;
--radius: 150px;
}
.circular-layout > * {
--angle: calc(360deg / var(--items) * var(--i));
position: absolute;
left: calc(50% + var(--radius) * cos(var(--angle)));
top: calc(50% + var(--radius) * sin(var(--angle)));
transform: translate(-50%, -50%);
}ライブデモ
実務での使いどころ
-
円形レイアウト
要素を円周上に均等配置する。JSなしでカスタムプロパティと三角関数を組み合わせて実現。
-
アナログ時計
sin/cos で時計の針や目盛りの位置をCSSだけで計算する。
注意点
- 三角関数の引数は角度（deg, rad, turn）で指定する。単位なしの数値はラジアンとして扱われる。
アクセシビリティ
- 三角関数で配置した要素のDOM順序と視覚的順序が一致するよう配慮する。