CSSで画像や文字など要素を回転させる方法【アニメーションも解説】

画像を回転させたり、傾けるにはどうすればいいの？

画像や文字、他にも三角形など傾けたいときがあると思います。

今回は、CSSのtransform: rotate();を使って、要素を回転・傾ける方法をサンプルを使って解説していきます。

また、アニメーションもないと分かりにくいと思うので、アニメーションのサンプル（デモ）もご紹介します。

もし、マウスカーソルを載せたときに要素を回転させたい場合は、以下の記事を参照ください。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

CSSで要素を回転させる方法

CSSで要素を回転させるtransform: rotate();には、いくつか種類があります。

1つずつ解説していきますが、rotateZ()は単体ではrotate()と同じ動きになります。

HTMLのコード

HTMLの書き方ですが、共通のコードはこちらです。

<div class="box">
  <img src="画像パス" alt="" />
</div>

CSSのコード

CSSの書き方ですが、共通のコードはこちらです。

.box {
  height: 200px;
  margin-inline: auto;
  margin-top: 50px;
  width: 200px;
}
.box img {
  background-color: #b2d8ff;
  height: auto;
  width: 100%;
}

あとは画像下に文字を入れていますが、それは回転とは無関係なので割愛します（上記CSSもレイアウトの為のスタイルです）。

サンプル（デモ）

そして、こちらが回転させない基本形となります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これを回転させていきます。

要素の角度を変える『rotate()』

まずは、基本となるtransform: rotate();です。

書き方はtransform: rotate(数値deg);となり、degは角度の単位です。

これを、45度回転させてみます。

See the Pen
rotate(45deg) by junpei (@junpei-sugiyama)
on CodePen.

コードは、.box imgに1行追加しただけです。

.box img {
  transform: rotate(45deg);
}

これをマイナスにすれば、反対方向になります。

.box img {
  transform: rotate(-45deg);
}

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

360度で一周するので、transform: rotate(360deg);にすると何も変わりません。

また、transform: rotate(-45deg);とtransform: rotate(315deg);も、同じ結果になります。

transform: rotate(90deg);なら直角に回転し、transform: rotate(180deg);なら逆さまになります。

See the Pen
rotate(135deg) by junpei (@junpei-sugiyama)
on CodePen.

See the Pen
rotate(180deg) by junpei (@junpei-sugiyama)
on CodePen.

このように、中心を軸に時計の針のように回転するのが、transform: rotate();です。

また、transform: rotateZ();も同じ表示になります。

rotate()で回転させるアニメーション

これをアニメーションにしたのが、こちらです。

See the Pen
rotate()でアニメーション by junpei (@junpei-sugiyama)
on CodePen.

追記したCSSのコードはこちらです。

.box img {
  animation: rotation 4s linear infinite;
/* transform: rotate(○○deg); */ ← これは削除
}
/* アニメーション */
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

animationの意味はこちらです。

そして、keyframesで自分で命名したアニメーション名で、起点と終点の状態を書きます。

今回はスタート時の0%で角度0度、終了時の100%なので、360度で一周するという意味になります。

rotate()で逆回転させるアニメーション

また、逆回転にする場合は、transform: rotate(360deg);をtransform: rotate(-360deg);とマイナスにするだけです。

See the Pen
rotate()で逆回転アニメーション by junpei (@junpei-sugiyama)
on CodePen.

要素を横軸（X軸）で回転『rotateX()』

横軸（X軸）で回転を見てみます。

まずは、先ほどのtransform: rotate(180deg);をtransform: rotateX(180deg);にしてみましょう。

.box img {
  transform: rotateX(180deg);
}

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

先ほどと違い、文字が裏返しになっています。

これは、カードを縦方向に裏返すイメージです。

これを、transform: rotateX(45deg);にしたらこうなります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

潰れているように見えますが、45度傾いているだけです。

そして90度にすると、ちょうど水平線のようになって見えなくなります。

ちょっと分かりにくいですが、アニメーションで見ると分かると思います。

rotateX()で回転させるアニメーション

これをアニメーションにしたのがこちらです。

See the Pen
rotateX()で回転アニメーション by junpei (@junpei-sugiyama)
on CodePen.

コードは、先ほどのrotate(○○deg)をrotateX(○○deg)にしただけです（ちょっと時間は短くしています）。

.box img {
  animation: rotation-x 2.5s linear infinite;
/* transform: rotateX(○○deg); */ ← これは削除
}
/* アニメーション */
@keyframes rotation-x {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

また、これは逆回転にしても見た目は変わらないので割愛します。

要素を縦軸（Y軸）で回転『rotateY()』

横軸（Y軸）で回転を見てみます。

まずは、先ほどのtransform: rotate(180deg);をtransform: rotateY(180deg);にしてみましょう。

.box img {
  transform: rotateY(180deg);
}

See the Pen
rotateY(180deg) by junpei (@junpei-sugiyama)
on CodePen.

これもrotateXと同じく、文字が裏返しになっています。

これはカードを横方向に裏返すイメージで、X軸より分かりやすいかと思います。

これをtransform: rotateY(45deg);にしたら、こうなります。

See the Pen
rotateY(45deg) by junpei (@junpei-sugiyama)
on CodePen.

潰れているように見えますが、45度傾いているだけです。

そして、90度にすると見えなくなります。

ちょっと分かりにくいですが、これもアニメーションで見ると分かると思います。

rotateY()で回転させるアニメーション

これをアニメーションにしたのがこちらです。

See the Pen
rotateY()で回転アニメーション by junpei (@junpei-sugiyama)
on CodePen.

コードは、先ほどのrotate(○○deg)をrotateY(○○deg)にしただけです（ちょっと時間は短くしています）。

.box img {
  animation: rotation-y 2.5s linear infinite;
/* transform: rotateY(○○deg); */ ← これは削除
}
/* アニメーション */
@keyframes rotation-y {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

これも逆回転にしても見た目は変わらないので、割愛します。

要素を3Dで回転『rotate3d()』

これはX軸・Y軸・Z軸を使って立体的に回転させられます。

コードはこちらです。

transform: rotate3d(X, Y, Z, a);

コードの意味はこちらです。

例えば、transform: rotate3d(1, 1, 1, 90deg);にするとこのようになります。

See the Pen
rotateZ(180deg) by junpei (@junpei-sugiyama)
on CodePen.

rotate3d()で回転させるアニメーション

これをアニメーションにしたのがこちらです。

See the Pen
rotate3dでアニメーション by junpei (@junpei-sugiyama)
on CodePen.

コードはこれまでと同じ考えで大丈夫です。

.box img {
  animation: rotation-3d 2.5s linear infinite;
/* transform: rotate3d(1,1,1,○○deg); */ ← これは削除
}
/* アニメーション */
@keyframes rotation-3d {
  0% {
    transform: rotate3d(1,1,1,0deg);
  }
  100% {
    transform: rotate3d(1,1,1,360deg);
  }
}

おまけ：時計の秒針のように間隔を空けて回転させる方法

あまり使う機会はないと思いますが、等速や開始がゆっくり・終了がゆっくりではなく、時計の秒針のように動かすことも可能です。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

コードは最初のrotateのアニメーションとほぼ同じですが、違いは以下になります。

/* 通常の回転 */
.box img {
  animation: rotation 4s linear infinite;
}
/* 秒針のように回転 */
.box img {
  animation: rotation 60s steps(60) infinite;
}

これは秒針のように60秒で1周するように設定しているので、60の数値は変更しても大丈夫です。

まとめ

今回はCSSで要素を回転させる方法についてアニメーションを含めて解説してきました。

実務でも頻出するわけではありませんがたまに必要になるので、覚えておきましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！