【CSS Modules】asin()関数の使い方
asin()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
asin()関数は、アークサイン（逆正弦）を計算するCSS数学関数です。この関数は、与えられた数値が示す正弦値を持つ角度を返します。主に、CSSプロパティの値を動的に計算し、複雑なレイアウトやアニメーションを作成する際に使用されます。
asin()関数は単一の数値を引数として取ります。この引数は、-1から1の範囲内の浮動小数点数でなければなりません。この範囲外の値を指定した場合、結果は無効となり、CSSのレンダリングに影響を及ぼす可能性があります。例えば、asin(0.5)と記述すると、その正弦値が0.5となる角度（30度またはπ/6ラジアン）が計算され、結果として角度の単位（deg, rad, grad, turnなど）を持つ値が返されます。
この関数は、要素の回転角度を計算したり、特定のカーブに沿った動きを実装したりするなど、数学的な関係性に基づいて要素のスタイルを調整する場合に特に役立ちます。例えば、transform: rotate(asin(var(--x-pos)))のように変数と組み合わせて使用することで、要素のX位置に応じて回転角度を動的に変化させるといった高度なインタラクションを実現できます。正確な角度計算が必要な場面で、CSS内で直接数学的な処理を行えるため、より柔軟で表現豊かなデザインが可能になります。
公式リファレンス: asin()
構文(syntax)
1.example-element { 2 /* sin(30度) = 0.5 のため、asin(0.5) は 30度の角度（ラジアン値）を返します。 */ 3 transform: rotate(asin(0.5)); 4}
引数(parameters)
number
- number: 角度をラジアンで表した数値
戻り値(return)
angle
asin() 関数は、CSSの三角関数の一つで、指定された値の逆正弦（アークサイン）をラジアン単位の角度で返します。