CSSでサイン、コサイン、タンジェントが使えるようになると聞いたので試してみました。 現時点ではまだ一部のブラウザしか対応していないようです。今回はFireFoxを使います。
次のようなHTMLを書いてみました。ボックスの中にボールが3つ縦に並べたものです。
<div id="box"> <div class="ball" id="ball1"></div> <div class="ball" id="ball2"></div> <div class="ball" id="ball3"></div> </div>
これにJavaScriptでスタイルをセットします。
let degree = 0; const balls = document.querySelectorAll(".ball"); balls.forEach((ball, index) => { setInterval(() => { degree += 1; ball.style.marginLeft = `calc(50% * sin(${degree}deg) + 50%)`; }, 10); });
ボールのmarginLeftをsin()で計算して変化させます。 ボールに動きを付けた結果このような動きになりました。