1. ホーム
2. web
3. CSS三角関数：スタイルシートで数学を使う

CSSは単純なスタイリング言語から強力な計算エンジンへと進化しました。CSS Values and Units Module Level 4で導入された三角関数（Chrome 111+、Firefox 108+、Safari 15.4+で利用可能）はパラダイムシフトをもたらします。プリプロセッサやJavaScriptなしで、スタイルシート内で幾何学的計算が直接行えるようになりました。

関数リファレンスと構文

6つの三角関数がCSSで利用可能です：

角度単位はdeg、rad、grad、turnが使用可能です。よくある落とし穴としては、単位の忘れ、atan2でのゼロ除算、asin/acosでの定義域外入力があります。

波パターンと振動

sin()関数は波効果の作成に最適です。位相をアニメーションするだけで自然な波が表現できます：

@property --phase {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes phase-cycle {
  to { --phase: 360deg; }
}

.wave {
  animation: phase-cycle 2s linear infinite;
  transform: translateY(calc(sin(var(--phase)) * 20px));
}

[-1, 1]の出力範囲はcalc()を通じてピクセル値にマッピングします。複数要素にanimation-delayをずらして適用することで、リップル効果や音波の可視化が実現できます。

円形・ラジアルレイアウト

基本式x = cx + r * cos(angle)、y = cy + r * sin(angle)により、JavaScriptなしで円形レイアウトが可能です：

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

.dot {
  --x: calc(cos(var(--angle)) * 100px);
  --y: calc(sin(var(--angle)) * 100px);
  transform: translate(var(--x), var(--y));
}

@propertyと組み合わせることで、ラジアルメニュー、ドーナツチャート、軌道アニメーション、さらには角度に応じて半径が変化する螺旋レイアウトまで実現できます。

アニメーションカーブとイージング

三角関数は標準のcubic-bezierを超えたイージングカーブを生成します：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(abs(sin(3.14 * var(--t))) * -30px)); }
}

ease-in-out-sineはsin((t * pi) / 2)で表現され、指数減衰とsin()の組み合わせで自然なバネ・弾性アニメーションが作成できます。

プロシージャルデザイン

三角関数と@propertyを組み合わせることで、プロシージャルなパターン生成が可能です：

@property --seed {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero-bg {
  background: conic-gradient(
    from calc(sin(var(--seed)) * 1turn),
    #667eea, #764ba2,
    calc(cos(var(--seed)) * 1turn), #667eea
  );
}

--seedの値を変えるだけで全く異なるパターンが生成され、ページごとにユニークなビジュアルを提供できます。

ブラウザサポート

@supports (sin(0))で機能検出を行い、prefers-reduced-motionに配慮したフォールバックを提供しましょう。実用的なユースケースとしては、ダッシュボードゲージ、atan2を使用したビューポート端を避けるツールチップ配置、数学的可視化などがあります。

結論

CSS三角関数はスタイルシートの可能性の新次元を開放します。幾何学的に思考し、三角関数とカスタムプロパティを組み合わせることで、これまでJavaScriptなしでは不可能だった複雑なレイアウトやアニメーションが実現できます。CSSの未来は数学的に進化しています。