CSS でサイン、コサイン、タンジェントなどを計算します。
三角関数
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 コンポーネントを操作します。