このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
sin()
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月.
sin() はCSS の関数で、数値の正弦を返す三角関数です。値は-1 から1 までの範囲になります。この関数には単一の計算が含まれており、引数の結果をラジアンとして解釈して、<number> または<angle> のいずれかに解決する必要があります。つまり、sin(45deg)、sin(0.125turn)、sin(3.14159 / 4) はすべて、ほぼ0.707 という同じ値を表します。
試してみましょう
transform: translateX(calc(cos(0deg) * 140px)) translateY(calc(sin(0deg) * -140px));transform: translateX(calc(cos(90deg) * 140px)) translateY(calc(sin(90deg) * -140px));transform: translateX(calc(cos(135deg) * 140px)) translateY(calc(sin(135deg) * -140px));transform: translateX(calc(cos(180deg) * 140px)) translateY(calc(sin(180deg) * -140px));transform: translateX(calc(cos(-45deg) * 140px)) translateY(calc(sin(-45deg) * -140px));<div> <span></span></div>:root { --radius: 140px; --dot-size: 10px;}.circle { display: grid; place-content: center; margin: 0 auto; width: calc(var(--radius) * 2); aspect-ratio: 1; border-radius: 50%; border: 2px solid #666666; background-image: radial-gradient(black var(--dot-size), transparent var(--dot-size)), linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);}.dot { display: block; width: var(--dot-size); aspect-ratio: 1; border-radius: 50%; border: 2px solid #666666; background-color: #ff6666; transform: translateX(calc(cos(0deg) * var(--radius))) translateY(calc(sin(0deg) * var(--radius) * -1));}構文
css
/* 単一の <angle> 値 */width: calc(100px * sin(45deg));width: calc(100px * sin(0.25turn));width: calc(100px * sin(1.0471967rad));/* 単一の <number> 値 */width: calc(100px * sin(63.673));width: calc(100px * sin(2 * 0.125));/* その他の値 */width: calc(100px * sin(pi / 2));width: calc(100px * sin(e / 4));引数
sin(angle) 関数は、引数として 1 つの値のみを受け入れます。
返値
angle の正弦は、常に−1 から1 までの数値を返します。
angleがinfinity、-infinity、またはNaNの場合、結果はNaNです。angleが0⁻の場合、結果は0⁻です。
形式文法
<sin()> =
sin(<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
例
ボックスサイズの変更
この例では、sin(30deg) は0.5 を返し、ボックスの幅は50px、高さは50px になります。
css
div { background-color: red; width: calc(sin(30deg) * 100px); height: calc(sin(30deg) * 100px);}アニメーションの時間を制御
もう 1 つの用途は、animation-duration を制御し、正弦波の値に基づいて再生時間を縮小することです。この場合、アニメーションの再生時間は1s になります。
css
div { animation-name: myAnimation; animation-duration: calc(sin(0.25turn) * 1s);}仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |