---
title: "transformとは？要素を移動・回転・拡大するCSSの基礎"
description: "ホバーで要素をわずかに大きくしたり、アイコンを回転させたりするのに使うtransformの基礎を解説。translate・rotate・scaleの使い方を中心に、レイアウトを崩さず見た目だけ変える仕組みを初心者向けに整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-transform-term"
markdown: "https://giga-site.com/articles/css-transform-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# transformとは？要素を移動・回転・拡大するCSSの基礎

ボタンにマウスを乗せると少し大きくなる、アイコンがくるっと回る。こうした見た目の変化はCSSのtransformで作れます。この記事では、translate・rotate・scaleを中心に、要素を移動・回転・拡大縮小する基本の考え方を、初めての人にもわかるように整理します。

> Source HTML: https://giga-site.com/articles/css-transform-term
> Article index: https://giga-site.com/articles/index.md

## transformとは何か

transformは、要素の見た目を移動・回転・拡大縮小・傾斜といった形で変化させるCSSのプロパティです。元の位置やサイズを基準に、表示だけを変形させます。

重要なのは、transformは「見た目」を変えるだけで、ページ上の本来の場所（レイアウト上の占有領域）を大きく動かさない点です。だから周りの要素が引きずられて崩れにくく、軽い動きや装飾に使いやすいのです。

## translateで移動する

translateは要素を上下左右にずらす関数です。translateXで横方向、translateYで縦方向、translateで両方を一度に指定できます。

marginや位置指定で動かすのと違い、translateは周囲のレイアウト計算に影響を与えにくいため、ホバー時に少し浮かせるといった軽い演出に向いています。中央寄せのテクニックとしても使われます。

## 実務ではどこで関係する？

transformは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

transformについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## rotateとscaleで回転・拡大する

rotateは要素を回転させる関数で、角度をdeg（度）で指定します。プラスの値で時計回り、マイナスの値で反時計回りに回ります。

scaleは拡大縮小の関数です。1がそのままの大きさ、1より大きければ拡大、1より小さければ縮小します。横と縦で別々の倍率を指定することもできます。

これらは複数まとめて書くこともでき、たとえば移動しながら回転、といった組み合わせも可能です。書いた順序によって結果が変わる点には注意します。

## transformを試す手順

実際に手を動かして確かめるのが理解の近道です。小さな要素ひとつで試してみましょう。

1. 正方形のような分かりやすい要素を用意する
2. まずtranslateXだけ付けて、横にずれることを確認する
3. 次にrotateを付けて、回転の向きと中心を確認する
4. scaleを付けて、拡大縮小の様子を確認する
5. transitionと組み合わせ、ホバー時になめらかに変化させる
6. transform-originを変えて、回転や拡大の基準点が動くことを確認する

## つまずきやすいポイント

回転や拡大の中心は初期状態では要素の中央です。基準点をずらしたいときはtransform-originを使います。意図しない位置で回ってしまうときは、ここを見直すと解決することが多いです。

また、複数のtransformを別々の行に書くと、後の指定が前の指定を上書きしてしまいます。同時に効かせたいときは一行にまとめて書く必要があります。これは初学者がつまずきやすい落とし穴です。

## 変形した結果を共有して確認する

transformの効き方は環境や画面サイズで印象が変わることがあり、自分の画面だけで判断しきれない場合があります。完成前の状態を関係者に見てもらえると安心です。

ギガサイト便なら、HTMLやCSSを含むZIPをドロップするだけで一時的な共有URLが発行され、相手は会員登録なしで開けます。同じURLのまま中身を差し替えられるので、変形のパラメータを調整しながら何度も確認してもらう作業と相性が良いです。

## よくある質問

### transformで動かすとレイアウトは崩れますか？

transformは見た目の変形であり、要素が本来占める領域はほぼ変わりません。そのため周囲の要素を押しのけにくく、レイアウトを保ったまま軽い動きや装飾を付けやすいのが利点です。

### 回転や拡大の中心を変えるにはどうしますか？

transform-originを指定すると基準点を変えられます。初期値は要素の中央なので、左上や右下を基準に回したい場合などに使います。意図しない位置で回るときはここを確認しましょう。

### 複数のtransformを同時に効かせるには？

translateやrotateなどを一行にまとめて並べて書きます。別々の行で複数回transformを指定すると、後の指定が前を上書きしてしまうため、同時に効かせたい変形は一つのtransformにまとめてください。

### transformとtransitionは何が違いますか？

transformは「どう変形するか」を表すプロパティで、transitionは「変化をどれくらいの時間でなめらかにするか」を担います。ホバーで滑らかに拡大させたい場合などは、両方を組み合わせて使います。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [詳細度（specificity）とは？CSSが効かない時に確認する優先順位](https://giga-site.com/articles/css-specificity-term/index.md)
- [CSSのpositionとは？static・relative・absolute・fixedの違い](https://giga-site.com/articles/css-position-term/index.md)
- [px・em・rem・%とは？CSSの単位の違いをやさしく解説](https://giga-site.com/articles/css-units-term/index.md)
- [CSSカスタムプロパティ（変数）とは？色やサイズを使い回す仕組み](https://giga-site.com/articles/css-variables-term/index.md)
- [グラデーションとは？CSSで色を滑らかに変化させる基礎](https://giga-site.com/articles/css-gradient-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "transformとは？要素を移動・回転・拡大するCSSの基礎",
  "description": "ホバーで要素をわずかに大きくしたり、アイコンを回転させたりするのに使うtransformの基礎を解説。translate・rotate・scaleの使い方を中心に、レイアウトを崩さず見た目だけ変える仕組みを初心者向けに整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-transform-term",
  "url": "https://giga-site.com/articles/css-transform-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "transformで動かすとレイアウトは崩れますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "transformは見た目の変形であり、要素が本来占める領域はほぼ変わりません。そのため周囲の要素を押しのけにくく、レイアウトを保ったまま軽い動きや装飾を付けやすいのが利点です。"
      }
    },
    {
      "@type": "Question",
      "name": "回転や拡大の中心を変えるにはどうしますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "transform-originを指定すると基準点を変えられます。初期値は要素の中央なので、左上や右下を基準に回したい場合などに使います。意図しない位置で回るときはここを確認しましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "複数のtransformを同時に効かせるには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "translateやrotateなどを一行にまとめて並べて書きます。別々の行で複数回transformを指定すると、後の指定が前を上書きしてしまうため、同時に効かせたい変形は一つのtransformにまとめてください。"
      }
    },
    {
      "@type": "Question",
      "name": "transformとtransitionは何が違いますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "transformは「どう変形するか」を表すプロパティで、transitionは「変化をどれくらいの時間でなめらかにするか」を担います。ホバーで滑らかに拡大させたい場合などは、両方を組み合わせて使います。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```