CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説

Post on:2023年3月23日

sponsorsr

CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。

CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。

CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説

Trigonometric functions in CSS
by Bramus

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSSの三角関数が主要ブラウザにサポートされました
CSSの三角関数とは: sin(), cos(), tan()
CSSの三角関数とは: asin(), acos(), atan(), atan2()
CSSの三角関数の使用例

CSSの三角関数が主要ブラウザにサポートされました

CSSの三角関数はChrome 111でサポートされ、これで4つの主要ブラウザにサポートされました。

CSSでは、数式を使用することができます。calc()関数をはじめ、min(), max(), clamp()などの関数についても聞いたことがあると思います。

Chrome 111で、sin(), cos, tan(), asin(), acos(), atan(), atan2()の三角関数が加わりました。

これらの三角関数はCSS Values and Units Module Level 4で定義されており、下記のブラウザで使用可能です。

sin()のサポートブラウザ

cos()のサポートブラウザ

tan()のサポートブラウザ

CSSの三角関数とは: sin(), cos(), tan()

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

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

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

下記のデモではこれらの三角関数を使用して、設定された--angleを囲む三角形を構成する線を描画します。

斜辺（イエロー）とは、円の中心から点の位置に向かう線です。その長さは円の--radiusに等しくなります。
隣辺（レッド）とは、円の中心からX軸に沿った線です。その長さは--radiusに--angleのサインを掛けた値に等しくなります。
対辺（ブルー）とは、円の中心からY軸に沿った線です。その長さは--radiusに--angleのサインを掛けた値に等しくなります。
点からX軸に向かってグリーンの線を描画するには、--angleのtan()関数が使用されます。

See the Pen
CSS Trigonometric Functions: cos(), sin(), and tan() by web.dev (@web-dot-dev)
on CodePen.

数学の三角関数については、下記をご覧ください。

Sine, Cosine and Tangent

CSSの三角関数とは: 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()で決定されます。

: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)
  ;
}

: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)

;

}

See the Pen
CSS Trigonometric Functions: cos() and sin(): dots on a circle by web.dev (@web-dot-dev)
on CodePen.

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

1つ目の子要素は、0 x 120deg = 0degにオフセットされます。
2つ目の子要素は、1 x 120deg = 120degにオフセットされます。
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)
          );
}