ブログデザイン備忘録 ～ 三角関数

今回はブラウザで新たにサポートされたCSSの三角関数について紹介したい。

たいていのプログラミング言語では三角関数はサポートされているが、今回はCSSの三角関数がブラウザでサポートされたというもの。

具体的には三角関数 sin(), cos(), tan()と逆三角関数asin(), acos(), atan(), atan2()がある。

CSSを用いてWebページのレイアウトで役立てるというよりも、ページ内に何かアニメーションを添える場合は、三角関数は有用だと思う。

以下のページの三角関数の利用例ではドットが円軌道上に動くアニメーションが挙げられている。

CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説 | コリス

上の例を改造して、アステロイド曲線を描くようにした。円軌道の計算部分 x=cos(angle), y=sin(angle)をx=cos³(angle),y=sin³(angle)とすればアステロイド曲線が描ける。

See the Pen test_trig_function by ATATAT (@atatat) on CodePen.