このページは Cloud Translation API によって翻訳されました。

CSS の三角関数

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

Bramus

三角関数

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

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

対応ブラウザ

111
111
108
15.4

ソース

`sin()`、`cos()`、`tan()`

中心となる 3 つの trig 関数は次のとおりです。

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() です。これらの関数は逆方向に計算を行います。引数として数値を受け取り、対応する角度を返します。

最後に、A と B の 2 つの引数を受け入れる atan2() があります。この関数は、正の 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 つのうち 1 つ目の子要素は 0 x 120deg = 0deg でオフセットされます。
3 つのうち 2 つ目の子要素は 1 x 120deg = 120deg でオフセットされます。
3 つのうち 3 つ目の子要素は 2 x 120deg = 240deg でオフセットされます。

要素を回転させて原点と向き合わせる

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

この計算値では、個々の変換プロパティを使用することで、要素が互いに対向するように回転させることができます。

次の例では、マウスの位置を向くようにボックスが回転しています。マウスの位置は、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 コンポーネントを操作します。