CSS の三角関数

CSS でサイン、コサイン、タンジェントなどを計算します。

Bramus

三角関数

CSS では数式を記述できます。ベースには計算を行う calc() 関数がありますが、min()、max()、clamp() についても聞いたことがあると思います。

これらの関数を結合するのは、三角関数 sin()、cos()、tan()、asin()、acos()、atan()、atan2() です。これらの機能は CSS の値と単位モジュール レベル 4 で定義されており、すべてのブラウザで使用できます。

sin()、cos()、tan()

主な 3 つのトリガー関数は次のとおりです。

• cos(): 角度のコサインを返します。この値は -1～1 です。
• sin(): 角度のサインを返します。この値は -1～1 です。
• tan(): 角度のタンジェント（−∞～+∞ の範囲内の値）を返します。

JavaScript 関数とは異なり、これらの関数は引数として角度とラジアンの両方を受け入れます。

次のデモでは、これらの関数を使用して、集合 --angle を囲む三角形を構成する線を描画します。

• 「斜辺」（黄色の線）は円の中心から点の位置までの線です。長さは円の --radius と等しくなります。
• 「隣接」（赤い線）は、X 軸に沿った円の中心からの線です。長さは、--radius に --angle のコサインを掛けた値になります。
• 「その逆」（青い線）は、Y 軸に沿った点の中心からの線です。長さは、--radius に --angle のサインを乗じた値になります。
• --angle の tan() 関数を使用して、点から X 軸に向かって緑色の線を描画します。

asin()、acos()、atan()、atan2()

sin()、cos()、tan() に対応する弧または逆は、それぞれ asin()、acos()、atan() です。これらの関数は逆方向に計算を行います。つまり、数値を引数として受け取り、それに対応する角度を返します。

最後の atan2() は、A と B の 2 つの引数を受け入れます。この関数は、正の X 軸と点 (B,A) との間の角度を返します。

例

これらの関数にはさまざまなユースケースがあります。以下で取り上げるのは、ごく一部です。

中心点を中心とした円形のパス上でアイテムを移動する

次のデモでは、中心点の周囲にドットが描かれています。各ドットは、それぞれの中心を中心に回転してから外側に移動するのではなく、X 軸と Y 軸に沿って並進します。X 軸と Y 軸の距離は、それぞれ --angle の cos() と sin() を考慮して決定されます。

: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）の距離があります。

• 3 つのうち最初の子要素は、0 x 120deg = 0deg のオフセットを取得します。
• 3 つのうち 2 番目の子要素は、1 x 120deg = 120deg のオフセットを取得します。
• 3 つのうち 3 番目の子要素は、2 x 120deg = 240deg だけオフセットされます。

要素を回転させて原点を向く

atan2() 関数は、ある点から別の点までの相対的な角度を計算します。この関数は、パラメータとして 2 つのカンマ区切り値を受け取ります。原点 0,0 を起点とする始点を基準として、他方の地点の y と x の位置を指定します。

計算された値があれば、個別の変換プロパティを使用することで、互いに向き合うように要素を回転できます。

次の例では、マウスがある位置を向くようにボックスが回転しています。マウスの位置は、JavaScript によってカスタム プロパティに同期されます。

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

コミュニティのハイライト

こちらのアナ チューダーによるメビウスのアニメーション ストリップに示されているように、cos() と sin() は翻訳以外にも使用できます。この関数の結果を使用して、hsl() カラー関数の s コンポーネントと l コンポーネントを操作します。