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関数の第二引数に指定する間隔を変更することで速度を調整できます。
よくある質問（FAQ）
Q. JavaScriptとCSSで画像を回転させるには？
A. CSSのtransform: rotate(90deg)で90度回転できます。JavaScriptから制御する場合はelement.style.transform = “rotate(90deg)”を設定します。Canvasを使えばピクセル単位の回転も可能です。
Q. クリックするたびに90度ずつ回転させるには？
A. 現在の回転角度を変数に保存し、クリックで+90してCSS transformに適用します。360を超えたら0に戻す処理を加えると無限に回転させられます。
Q. Canvas APIで画像を回転して保存するには？
A. ctx.save()→ctx.translate(cx, cy)→ctx.rotate(angle)→ctx.drawImage()→ctx.restore()の順で描画し、canvas.toDataURL()で回転済み画像のBase64を取得できます。
まとめ
どちらの方法も、Webページで画像を継続的に回転させることができます。CSSを使用する方法がよりシンプルであり、アニメーションのパフォーマンスも向上します。