CSSの三角関数を理解しよう！ sin()とcos()でできる表現 - ICS MEDIA

2023年3月にリリースされるChrome 111ではCSSの三角関数がサポートされます。FirefoxやSafariではすでにサポートされている機能のため、2023年3月からは主要なブラウザでCSSの三角関数が使えるようになります。 とはいえ、「CSSで三角関数をどうやって使えばいいの？」「そもそも三角関数で何ができるの？」という方も多いのではないでしょうか。この記事では三角関数のうちサイン関数とコサイン関数の作例を交えながら解説します。 三角関数のおさらい まずはサイン関数とコサイン関数のそれぞれの使い方を少しおさらいしてみましょう。下図は角度をθ、半径をrとした時のx座標とy座標を表したものです。 たとえば角度が60°で半径が200だった場合、CSSのサイン関数とコサイン関数を使うと、x座標はcos(60deg) * 200、y座標はsin(60deg) * 200で求められます。つ

[renos]

”下図は角度をθ、半径をrとした時のx座標とy座標を表したものです” ここで「イ”ッ！！！」ってなった人は仲間

[mozukuyummy]

CSSだけでアナログ時計が作れそう。

[sisicom]

sin、cosあんまり分かっていないだけに、面白い

[otchy210]

css の話かと思ったが数学の話だった。円弧に沿って配置するだけなら別にそんなに嬉しくないが、本領が発揮されるのはアニメーションだと思う。聖剣伝説Ⅱのリングコマンド作ろうぜ！

[misshiki]

“Chrome 111ではCSSの三角関数がサポートされます。”

[khtokage]

世の中そんなに三角関数が分からない人多いのか、とそちらにびっくりした

[hatest]

C：コサインと　S：サイン　S：しかないけどタンジェントは？

[enhanky]

？？？「三角関数なんて社会に出たら使わないぞ！」

[kondoly]

球体で説明始めたほうがむしろ簡単という感じがする。グーグルマップつかって直線距離だすのとか例題にすると身近にできそう。

[Shinwiki]

学校の時から捨ててかかってたのに無理だよ

[betef]

四角関数とかないのかな

[securecat]

三角関数、僕が高校時代に数学挫折した終わりの始まりじゃないか……　CSSを通じて学び直ししたい！