CSSの三角関数を使ってみる

2023年 6月28日　Posted　野々瀨(フロントエンドエンジニア)

CSSで三角関数を扱える日がついに迎えました。今までは固定であればあらかじめ計算された値を指定したり、JavaScriptで処理したりしていました。CSSに三角関数が実装されたことにより、今まであらかじめ固定値で実装していたところやJavaScriptで実装していたところを、簡単にCSS側で対応することができるようになりました。

三角関数とは

そもそも三角関数とは、任意の角度に対して定義される関数で、三角比の値を求めるものです。原点Oを中心とした半径rの円で、原点Oからの角度θを持つ三角形に対する三角比を求めるための関数です。

三角関数の定義

三角関数の定義は次のとおりです。

これを利用することで、さまざまな計算を行うことができます。

CSSの三角関数

CSSでの三角関数は次のとおりです。

関連リンク

• sin() - MDN
• cos() - MDN
• tan() - MDN
• asin() - MDN
• acos() - MDN
• atan() - MDN
• atan2() - MDN

対応ブラウザー

最新のブラウザーではほぼ全てのブラウザーで対応しています。

関連リンク

• types: sin() - Can I Use
• types: cos() - Can I Use
• types: tan() - Can I Use
• types: asin() - Can I Use
• types: acos() - Can I Use
• types: atan() - Can I Use
• types: atan2() - Can I Use

試してみる

要素を円形に配置するとしましょう。

まず次のHTMLを用意します。配置する要素（クラス名ball）六つを用意しています。

<div class="stage">
	<div class="ball"></div>
	<div class="ball"></div>
	<div class="ball"></div>
	<div class="ball"></div>
	<div class="ball"></div>
	<div class="ball"></div>
</div>

次の基本となる土台と配置するアイテムのスタイルをあてます。

/* ステージ */
.stage {
	/* 配置する円の半径 */
	--radius: 100px;

	position: relative;
	border: 1px solid #ccc;
	border-radius: 50%;
	width: calc(var(--radius) * 2);
	aspect-ratio: 1;
}

	/* ボール ※ これを配置する */
	.stage .ball {
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 50%;
		width: 20px;
		aspect-ratio: 1;
		background-color: #eb6bb1;
	}

変数--radiusは配置の基準となる円の半径です。半径は100pxで指定していますので、直径200pxの基準となる円に、配置する要素をpositionプロパティで中央付近に初期設置しておきます。なお、この状態ですと中央よりやや右下よりに配置された状態になりますが、このズレに関しては後ほど調整します。

続いて次のスタイルで変数を定義します。

.stage {
	--base-angle: (360deg / 6);

	...
}

	.stage .ball {
		--angle: var(--base-angle) * var(--n) - 90deg;
		--x: calc(cos(var(--angle)) * var(--radius) - 50%);
		--y: calc(sin(var(--angle)) * var(--radius) - 50%);

		...
	}

変数--base-angleは配置する要素の1回分の角度です。今回は六つに要素を分割して配置するため、360度を6で割った数を算出しています。

変数--angleは配置するそれぞれの要素を、どの角度に向けて配置するかの角度を算出する変数です。計算式内にある変数--nは各配置要素で配置する角度を算出するために使われる変数です（後ほど登場します）。

また、計算式内で- 90degとありますが、これは配置の基準となる円の角度（0度）が、右（東）ですので、90度マイナスにして上（北）を基準にするように変更しています。

変数--xは配置する要素のX軸を算出する変数です。式「x = $\cos(θ) \times r$」これを利用します。変数--angleをcos関数の引数に指定し、半径である変数--radiusを乗算することでX軸方向の値を算出することができます。また、計算式内で - 50%とありますが、先ほど中央より右下に配置されることを書きましたが、これを調整するものです。配置する自身の要素の幅の半分をマイナスしています。

変数--yは配置する要素のY軸を算出する変数です。式「y = $\sin(θ) \times r$」これを利用します。やっていることはX軸と同じで、違いはsin関数を使用しているところです。

続いて次のスタイルで配置する各要素に対して指定していきます。（六つあるので少々長いです）

.stage .ball:nth-child(1) {
	--n: 1;
	translate: var(--x) var(--y);
}

.stage .ball:nth-child(2) {
	--n: 2;
	translate: var(--x) var(--y);
}

.stage .ball:nth-child(3) {
	--n: 3;
	translate: var(--x) var(--y);
}

.stage .ball:nth-child(4) {
	--n: 4;
	translate: var(--x) var(--y);
}

.stage .ball:nth-child(5) {
	--n: 5;
	translate: var(--x) var(--y);
}

.stage .ball:nth-child(6) {
	--n: 6;
	translate: var(--x) var(--y);
}

先ほど登場した変数--nを連番で指定します。また、先ほど定義した変数--xと--yをtranslateプロパティに指定します。これで円形に沿って要素が六つ配置されます。

See the Pen CSS三角関数デモ by Yu.No (@yu-no) on CodePen.

最後に

いかがだったでしょうか。CSSで三角関数が使えるようになったことで、JavaScriptを使わずにある程度自由に表現ができるようになりました。今回は簡単な内容でご紹介しましたが、回転時の位置調整や円形や扇形のメニュー、音声波形などさまざまなところで活躍できるかと思いますので、ぜひ皆さんも使ってみてはいかがでしょうか。