CSS三角関数アニメーション - サンプルデモ

← 記事に戻る
1. 円形配置(時計風)

sin() と cos() で12個の数字を円形に配置。リアルタイムで針が動きます。

2. 円軌道アニメーション

@property で --angle を型付けし、sin()/cos() で円軌道を描きます。

3. 波形アニメーション

各要素に位相のずれを持たせ、sin() で波形を作ります。ドット数を変更できます。

4. 放射状メニュー

中央のボタンをクリックすると、メニューが三角関数で計算された位置に展開します。