CSS transformとは？translate・scale・rotateの使い方を解説

Webサイトに動きや変化を加える際によく使われるのが「transform」です。

transformを使うと、要素の位置を移動したり、大きさを変えたり、回転させたりできます。ボタンのホバーアニメーションや画像の拡大表示など、多くの場面で利用されています。

この記事では、CSSのtransformプロパティの基本から、translate・scale・rotateの使い方までを初心者向けにわかりやすく解説します。

transformとは？

transformは、要素の見た目を変形させるためのCSSプロパティです。

主な変形には次のような種類があります。

• translate：位置を移動する
• scale：拡大・縮小する
• rotate：回転する
• skew：傾ける

transformはレイアウト自体を変更するのではなく、見た目だけを変化させるのが特徴です。

.box {
  transform: translateX(100px);
}

この場合、要素は右へ100px移動して表示されます。

transformの基本構文

基本構文は次のようになります。

.box {
  transform: 変形の種類(値);
}

複数の変形を組み合わせることも可能です。

.box {
  transform: translateX(50px) rotate(30deg);
}

左から順番に処理されるため、記述順によって結果が変わる場合があります。

translateで要素を移動する

translateは要素を移動させる機能です。

translateX()

横方向に移動します。

.box {
  transform: translateX(100px);
}

100px右へ移動します。

translateY()

縦方向に移動します。

.box {
  transform: translateY(50px);
}

50px下へ移動します。

translate()

横方向と縦方向を同時に指定できます。

.box {
  transform: translate(100px, 50px);
}

右へ100px、下へ50px移動します。

translateを使ったボタンのホバー例

<button class="button">送信する</button>

.button {
  padding: 12px 24px;
  transition: 0.3s;
}

.button:hover {
  transform: translateY(-5px);
}

マウスを乗せると、ボタンが少し浮き上がる演出になります。

scaleで拡大・縮小する

scaleは要素の大きさを変更します。

拡大する

.box {
  transform: scale(1.2);
}

1.2倍の大きさになります。

縮小する

.box {
  transform: scale(0.8);
}

80％の大きさになります。

X方向だけ拡大する

.box {
  transform: scaleX(1.5);
}

横幅だけ1.5倍になります。

Y方向だけ拡大する

.box {
  transform: scaleY(1.5);
}

高さだけ1.5倍になります。

画像のホバー拡大

<img class="image" src="sample.jpg" alt="">

.image {
  transition: 0.3s;
}

.image:hover {
  transform: scale(1.1);
}

画像にマウスを乗せると、少し拡大されます。

rotateで回転させる

rotateは要素を回転させます。

時計回りに回転

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

45度回転します。

反時計回りに回転

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

マイナスを付けると逆方向に回転します。

アイコンを回転させる例

<div class="icon">▼</div>

.icon:hover {
  transform: rotate(180deg);
  transition: 0.3s;
}

ホバーすると矢印が反転します。

複数のtransformを組み合わせる

transformは複数指定できます。

.box {
  transform: translateY(-10px) scale(1.1) rotate(5deg);
}

この場合、

1. 上へ10px移動
2. 1.1倍に拡大
3. 5度回転

という処理が行われます。

ボタンやカードのホバー演出でよく利用されます。

transform-originで基準位置を変更する

回転や拡大の基準位置はtransform-originで変更できます。

.box {
  transform-origin: left top;
}

主な値は次の通りです。

デフォルトはcenterです。

transformとtransitionを組み合わせる

transformはtransitionと組み合わせることで、滑らかなアニメーションになります。

<div class="card">カード</div>

.card {
  width: 200px;
  padding: 40px;
  background: #f5f5f5;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-10px) scale(1.05);
}

カードが浮き上がるような演出になります。

transitionについては、

「CSSアニメーションの基本と使い方を解説」

もあわせて読むと理解が深まります。

transformを使う際の注意点

marginとは役割が異なる

transformで移動しても、周囲の要素の位置は変わりません。

.box {
  transform: translateX(50px);
}

見た目だけ移動しているため、レイアウト自体には影響しません。

複数回指定すると上書きされる

次のように別々に書くと、後から書いたものだけが適用されます。

.box {
  transform: translateX(50px);
  transform: rotate(45deg);
}

結果としてrotateだけが有効になります。

正しくは次のようにまとめます。

.box {
  transform: translateX(50px) rotate(45deg);
}

まとめ

transformは、要素を自由に変形できる便利なプロパティです。

主な機能は次の3つです。

• translate：移動する
• scale：拡大・縮小する
• rotate：回転する

また、transitionと組み合わせることで滑らかなアニメーションを実現できます。

ボタン、画像、カード、アイコンなどさまざまな場面で使われるため、基本をしっかり理解しておくと表現の幅が大きく広がります。

関連記事

• CSSアニメーションの基本と使い方を解説
• CSSセレクタとは？種類と使い方をわかりやすく解説
• CSSの詳細度（Specificity）とは？優先順位の仕組みを解説
• CSS設計とは？保守しやすいスタイルを書く基本を解説
• BEMとは？CSS設計でよく使われる命名規則を解説