CSS の三角関数

CSS で正弦、余弦、正接などを計算します。

Bramus

三角関数

CSS では数式を記述できます。計算を行う calc() 関数がベースにありますが、min()、max()、clamp() もよく耳にする関数です。

これらの関数に加わる三角関数は、sin()、cos()、tan()、asin()、acos()、atan()、atan2() です。これらの関数は CSS Values and Units Module Level 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)
          );
}

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

Ana Tudor によるアニメーションの Möbius の帯で示されているように、cos() と sin() は変換以外にも使用できます。ここで、その結果を使用して、hsl() カラー関数の s コンポーネントと l コンポーネントを操作します。