CSSの三角関数（sin(), cos(), tan()）

2023.06.03

CSSの三角関数でコアとなるのは、次の3つである。

  • sin(): 角度のサイン（-1から1の間の値）を返す
  • cos(): 角度のコサイン（-1から1の間の値）を返す
  • tan(): 角度のタンジェント（-∞から+∞の間の値）を返す

CSSの三角関数はJavaScriptのとは異なり、角度とラジアンの両方を引数として受け取る。

2023年3月にリリースされるChrome 111ではCSSの三角関数がサポートされる。FirefoxやSafariではすでにサポートされている機能のため、2023年3月からは主要なブラウザでCSSの三角関数が使えるようになる。

三角関数のおさらい

角度をθ、半径をrとする。たとえば角度が60°で半径が200だった場合、CSSのサイン関数とコサイン関数を使うと、x座標はcos(60deg) * 200、y座標はsin(60deg) * 200で求められる。つまり、角度と半径が分かっている円周上の点の位置を計算することができる。

逆三角関数（asin(), acos(), atan(), atan2()）

sin(), cos(), tan()の逆三角関数に相当するものとして、asin(), acos(), atan()がある。これらの関数は、逆方向の計算を行う。引数として数値を受け取り、その数値に対応する角度を返す。
最後のatan2()は、2つの引数AとBを受け取る。この関数は、正のX軸と点（B, A）の間の角度を返す。

CSSの三角関数の使用例

要素を円軌道で移動させる

以下の例は、ドットのアイテムが中心点を中心にして回転する。各ドットは中心点に対して回転し、外側に移動するのではなく、X軸とY軸に沿って移動する。X軸とY軸の距離は、–angleのcos()とsin()で決定される。

<div class="wrapper">
  <div id="visual" data-countchildren>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

中心点を中心にドットを均等に配置するために、各ドットにはnth-childインデックスに基づくオフセットが追加される。たとえば、3つのドットがある場合は、各ドット間には120deg（=360deg / 3）の距離がある。

  • 1つ目の子要素は、0 x 120deg = 0degにオフセットされる
  • 2つ目の子要素は、1 x 120deg = 120degにオフセットされる
  • 3つ目の子要素は、2 x 120deg = 240degにオフセットされる

その他の実装例

  • ローディングアニメーション
  • 円形に並んだメニュー
  • Sine Waveに沿った配置（テキストを波打つように配置する）

【参考】
https://ics.media/entry/230126/

inserted by FC2 system