【CSS初心者向け】transformの使い方を徹底解説｜画像や文字を動かす・回す・拡大する基本まとめ
CSSのtransform（トランスフォーム）は、要素を動かしたり、回転させたり、拡大・縮小したりするためのプロパティです。
アニメーションやデザイン演出でもよく使われる、とても便利な機能です。
この記事では、初心者向けにtransformの基本と使い方を、具体例つきでわかりやすく解説します。
🟢 transformとは？
transformは、要素の見た目を変形（トランスフォーム）させるCSSプロパティです。
例えば、次のようなことができます。
- 要素を移動する（
translate） - 回転させる（
rotate） - 拡大・縮小する（
scale） - 傾ける（
skew） - 3D風に動かす（
rotateX/rotateY）
🧩 基本の書き方
.box {
transform: 値;
}
例：
.box {
transform: rotate(45deg);
}
この場合、.boxというクラスの要素が45度回転します。
💡 よく使うtransformの種類と使い方
① 移動する：translate()
.box {
transform: translate(50px, 20px);
}
👉 横に50px、縦に20px移動します。
左右だけ動かすなら translateX(50px)、上下なら translateY(20px) と書けます。
② 回転する：rotate()
.box {
transform: rotate(30deg);
}
👉 要素を30度回転します。
単位の「deg」は“degree（度）”の略です。
③ 拡大・縮小する：scale()
.box {
transform: scale(1.5);
}
👉 要素を1.5倍に拡大します。
半分の大きさにしたい場合は scale(0.5)。
横と縦を別々に指定もできます。
transform: scale(1.2, 0.8);
👉 横方向1.2倍、縦方向0.8倍。
④ 傾ける：skew()
.box {
transform: skew(20deg, 10deg);
}
👉 要素を斜めに傾けることができます。
タイトルやボタンに動きをつけたいときにも便利です。
⑤ 複数を同時に使う
transformは複数の変形を組み合わせることもできます。
.box {
transform: rotate(30deg) translateX(50px) scale(1.2);
}
👉 回転 → 移動 → 拡大 が順に適用されます。
書く順番も重要です（順番が変わると動き方も変わります）。
🎨 transformとtransitionでアニメーションも！
transformはtransitionと組み合わせると、なめらかなアニメーションが簡単に作れます。
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
👉 マウスを乗せると、ボタンが少し大きくなって回転します。
Hover（ホバー）アニメーションの基本です。
🚀 よくある注意点
transformは位置を変えるけど、他の要素の配置には影響しません。
→ つまり、他の要素を押しのけたりはしません。
レイアウトの調整にはmarginやpositionを使いましょう。- アニメーションに使うときは、transitionを組み合わせるのが基本。
✅ まとめ
| 変形方法 | 値 | 効果 |
|---|---|---|
| translate() | 移動 | 要素を動かす |
| rotate() | 回転 | 要素を回す |
| scale() | 拡大・縮小 | 大きさを変える |
| skew() | 傾き | 要素を斜めにする |
| 複合利用 | 組み合わせOK | 自由に演出できる |
🏁 まとめの一言
transformを覚えると、静的なページが一気に動きのあるデザインになります。
まずはrotate()やscale()などから試してみましょう。
慣れてきたらtransitionと組み合わせて、かっこいいアニメーションを作るのがおすすめです！
💡関連記事におすすめ：
【図解あり】CSS transitionの基本｜hoverアニメーションをなめらかにする方法
【CSS初心者向け】画像を斜めに傾ける方法｜transformとrotateで簡単アニメーションをつけよう
その他関連記事はこちら→プログラミング備忘録
コメント