CSS数学関数:cos()とsin()のガイド

CSSの三角関数は、JavaScriptを使わずに複雑なレイアウトやアニメーションを作成する方法を変革しました。これらの強力なツールの中でも、cos()とsin()は、円形レイアウト、波形パターン、スムーズなアニメーションに不可欠な関数として際立っています。

単位円を通じたCSSのcos()とsin()の理解

CSSのcos()とsin()関数は、単位円の概念を使用して角度を座標にマッピングします。単位円とは、座標系の原点を中心とした半径1の円と考えてください。

• cos() は指定された角度のX座標を返します
• sin() は指定された角度のY座標を返します

これらのCSS数学関数に角度を渡すと、単位円上の位置を表す-1から1の間の値が返されます。この数学的な関係が、動的なCSSレイアウトを作成するための基盤となります。

/* 基本的な構文 */
.element {
  --angle: 45deg;
  --x: cos(var(--angle)); /* 約0.707を返す */
  --y: sin(var(--angle)); /* 約0.707を返す */
}

CSS三角関数を使った円形レイアウトの作成

CSSのcos()とsin()の最も実用的な応用例の1つは、要素を円周上に配置することです。この手法により、ハードコーディングされた位置やJavaScriptによる計算が不要になります。

.circular-menu {
  --radius: 150px;
  --total-items: 6;
}

.menu-item {
  --angle: calc(360deg / var(--total-items) * var(--index));
  transform: 
    translateX(calc(cos(var(--angle)) * var(--radius)))
    translateY(calc(sin(var(--angle)) * var(--radius)));
}

このアプローチは、要素を円周上に自動的に均等に配置するため、ラジアルメニュー、時計の文字盤、装飾的なレイアウトに最適です。CSS単位円の概念は、選択したどの半径値でも自然にスケーリングされます。

波形パターンと振動的なCSSアニメーションの構築

CSS三角関数は、有機的な波形パターンの作成に優れています。sin()とcos()は滑らかな振動を生成するため、複雑なキーフレームなしで波のようなCSSアニメーションを作成するのに理想的です。

.wave-element {
  --frequency: 2;
  --amplitude: 50px;
  --phase: calc(var(--index) * 30deg);
  
  transform: translateY(
    calc(sin(var(--phase) * var(--frequency)) * var(--amplitude))
  );
}

アニメーション化された波の場合は、これらの関数をCSSカスタムプロパティとアニメーションと組み合わせます:

@property --progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.oscillating {
  --wave: calc(sin(var(--progress) * 360deg) * 100px);
  transform: translateX(var(--wave));
  animation: wave-motion 2s linear infinite;
}

@keyframes wave-motion {
  to { --progress: 1; }
}

パフォーマンスとブラウザサポート

cos()とsin()を含むCSS数学関数は、現在すべての主要ブラウザでベースラインサポートが提供されています。これらの関数はブラウザのレンダリングパイプライン内でネイティブに最適化されており、CSSレイアウトやアニメーションにおいてJavaScriptベースの計算よりも優れたパフォーマンスを提供します。

主な利点:

• ランタイムのJavaScriptオーバーヘッドがない
• スタイル計算フェーズ中に計算が行われる
• ビューポートやプロパティの変更時に自動的に再計算される
• CSSトランスフォームと組み合わせることで滑らかな60fpsのアニメーションを実現

実践的な実装のヒント

CSS三角関数を使用する際は、以下のベストプラクティスを覚えておいてください:

1. CSSカスタムプロパティを使用して、再利用可能な値と保守性を向上させる
2. calc()と組み合わせて、単位円の-1から1の範囲の結果をスケーリングする
3. transformプロパティを活用して、ハードウェアアクセラレーションによるアニメーションを実現する
4. レスポンシブ単位を検討し、vwやcqiなどを使用してスケーラブルなレイアウトを作成する

/* レスポンシブな円形レイアウト */
.item {
  --responsive-radius: min(40vw, 300px);
  --x: calc(cos(var(--angle)) * var(--responsive-radius));
  --y: calc(sin(var(--angle)) * var(--responsive-radius));
  transform: translate(var(--x), var(--y));
}

まとめ

CSSのcos()とsin()関数は、JavaScriptに依存せずに数学的な精度をWebレイアウトにもたらします。円形ナビゲーションメニューから滑らかな波形アニメーションまで、これらのCSS数学関数はネイティブなブラウザパフォーマンスと、よりクリーンで保守しやすいコードを提供します。ブラウザサポートが引き続き強化される中、CSS三角関数は現代のCSSレイアウトとアニメーションにとって不可欠なツールになりつつあります。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..