Widely available 安心して使用可能。主要ブラウザで広くサポートされている。
ユニット・関数 Widely available

Trigonometric functions (sin, cos, tan, etc.)

sin()・cos()・tan() およびその逆関数をCSS内で使用でき、角度の引数からラジアン計算なしに値を得られる。円形配置やアナログ時計のような放射状レイアウトをCSSカスタムプロパティと組み合わせてJSなしで実現できる。クリエイティブなアニメーションや幾何学的レイアウトに有用。

関数数学

概要

sin()・cos()・tan() およびその逆関数をCSS内で使用でき、角度の引数からラジアン計算なしに値を得られる。円形配置やアナログ時計のような放射状レイアウトをCSSカスタムプロパティと組み合わせてJSなしで実現できる。クリエイティブなアニメーションや幾何学的レイアウトに有用。

対応ブラウザ

デスクトップ

Chrome 111+
Edge 111+
Safari 15.4+
Firefox 108+

モバイル

Chrome Android 111+
Safari iOS 15.4+
Firefox Android 108+

基本構文

CSS 
.circular-layout {
  --items: 8;
  --radius: 150px;
}

.circular-layout > * {
  --angle: calc(360deg / var(--items) * var(--i));
  position: absolute;
  left: calc(50% + var(--radius) * cos(var(--angle)));
  top: calc(50% + var(--radius) * sin(var(--angle)));
  transform: translate(-50%, -50%);
}

実務での使いどころ

  • 円形レイアウト

    要素を円周上に均等配置する。JSなしでカスタムプロパティと三角関数を組み合わせて実現。

  • アナログ時計

    sin/cos で時計の針や目盛りの位置をCSSだけで計算する。

注意点

  • 三角関数の引数は角度（deg, rad, turn）で指定する。単位なしの数値はラジアンとして扱われる。

アクセシビリティ

  • 三角関数で配置した要素のDOM順序と視覚的順序が一致するよう配慮する。

参考リンク