Webページで画像を回転させ続ける方法（CSS/JavaScript）

Webページで画像を回転させることは、視覚的に興味深い効果を与えることができます。以下では、CSSとJavaScriptを使用して画像を回転させる方法を紹介します。

CSSを使用する方法

.rotate-image {
    animation: rotate 5s linear infinite; /* 5秒ごとに1回転 */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

上記のCSSコードでは、.rotate-imageクラスを持つ要素を1回転させるアニメーションを定義しています。@keyframesルールを使用して、要素を0度から360度まで回転させるアニメーションを定義しています。

JavaScriptを使用する方法

const image = document.querySelector('.rotate-image');
let angle = 0;

setInterval(() => {
    angle = (angle + 1) % 360;
    image.style.transform = `rotate(${angle}deg)`;
}, 50); // 50ミリ秒ごとに回転

上記のJavaScriptコードでは、指定した要素を50ミリ秒ごとに1度ずつ回転させるように設定しています。setInterval関数を使用して、一定の間隔で角度を更新し、要素のtransformプロパティを変更して回転させます。

回転の速度を変更する方法：CSSを使用する場合

.rotate-image {
    animation: rotate 10s linear infinite; /* 10秒ごとに1回転 */
}

CSSの場合、アニメーションのanimation-durationプロパティを変更することで速度を制御できます。

回転の速度を変更する方法：JavaScriptを使用する場合

const image = document.querySelector('.rotate-image');
let angle = 0;
let rotationSpeed = 2; // 回転速度（度/間隔）

setInterval(() => {
    angle = (angle + rotationSpeed) % 360;
    image.style.transform = `rotate(${angle}deg)`;
}, 50); // 50ミリ秒ごとに回転

JavaScriptの場合、setInterval関数の第二引数に指定する間隔を変更することで速度を調整できます。

まとめ

どちらの方法も、Webページで画像を継続的に回転させることができます。CSSを使用する方法がよりシンプルであり、アニメーションのパフォーマンスも向上します。