2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
Post on:2023年1月10日
sponsors
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！
CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。
CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。
2023年3月1日（米国時間）にリリース予定のChrome 111ではデフォルトで、三角関数が有効になります。Edgeもそれに続きます。
CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。
- sin()
引数として与えた数のサイン
ボックスのサイズを変更したり、アニメーション持続時間の値として使用できます。 - cos()
引数として与えた数のコサイン
回転したボックスのサイズを維持するために使用できます。 - tan()
引数として与えた数のタンジェント
平行四辺形の描画に使用できます。 - acos()
引数として与えた数のアークコサイン
要素の回転に使用できます。 - asin()
引数として与えた数のアークサイン
要素の回転に使用できます。 - atan()
引数として与えた数のアークタンジェント
要素の回転に使用できます。 - atan2(x, y)
(0, 0)から(x, y)までの半直線とx軸の間の平面上での角度
要素の回転に使用でき、2つの値をパラメーターとして使用できます。
2023年1月現在、三角関数のサポートブラウザは下記の通り。
Safari, Firefoxではサポートされており、これにChrome 111とEdge 111が加わります。
Chromeでのステータスについては、下記をご覧ください。デスクトップ版Chromeをはじめ、Android版でも111でサポートされる予定になっています。
sin(), cos(), tan() などの三角関数を使用すると、どういったことが実装できるかは、Chromeのデベロッパーの方がデモを公開しています。
上のデモでは、CSSの三角関数を使用してアニメーションの遅延を算出しています。下のデモでは、アニメーションとレイアウトに三角関数を使用しています。
Extra CSS Tip! 👀
Following up, you could also use CSS trigonometric functions to calculate animation-delay 🤓
Useful for loading animations ⏳
.dot {
animation-delay: calc(
👇
sin((var(--index) / var(--count) * 45deg) * -1s
);
}@CodePen link below! 👇 https://t.co/zCZh1HYpaw pic.twitter.com/s76ebXKhJn— jhey 🔨🐻✨ (@jh3yy) January 6, 2023
sponsors
