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

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

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

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

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

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

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

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

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

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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

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

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

また共通のコードはこちらになります。

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

.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.

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

.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で要素を回転させる方法についてアニメーションを含めて解説してきました。

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

以上になります。