CSSの三角関数を試す

CSSでサイン、コサイン、タンジェントが使えるようになると聞いたので試してみました。 現時点ではまだ一部のブラウザしか対応していないようです。今回はFireFoxを使います。

caniuse.com

次のようなHTMLを書いてみました。ボックスの中にボールが3つ縦に並べたものです。

<divid="box"><divclass="ball"id="ball1"></div><divclass="ball"id="ball2"></div><divclass="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()で計算して変化させます。 ボールに動きを付けた結果このような動きになりました。