transform を使った動きの表現
更新日：2026-08-02
前のページでは、
hoverfocusactivedisabled
など、ユーザー操作に反応するCSSを学びました。
今回は、
要素を動かすCSS
を学びます。
Webサイトでは、
- 少し浮き上がるボタン
- ふわっと拡大するカード
- 横にスライドする画像
- 回転するアイコン
など、さまざまな動きが使われています。
その中心になるのが、
transform
です。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
└── css/
└── style.css
transform とは？
transform は、
要素を変形するCSS
です。
例えば、
- 移動
- 拡大
- 縮小
- 回転
などができます。
translate
translate は、要素を移動します。
transform: translateX(20px);
これは、
右へ20px移動
です。
translateY
縦方向へ移動する場合は translateY を使います。
transform: translateY(-10px);
これは、
上へ10px移動
です。
hover と組み合わせる
例えば、カードを少し浮かせることができます。
<div class="card">
カードです
</div>
.card {
width: 300px;
padding: 24px;
border-radius: 12px;
background-color: white;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
transition: 0.3s;
}
.card:hover {
transform: translateY(-8px);
}
なぜ「上へ移動」で浮いて見えるの？
人間は、
上へ動く = 浮いた
と感じやすいからです。
さらに、
box-shadow
を組み合わせると、より立体感が出ます。
scale
scale は、拡大・縮小です。
transform: scale(1.1);
これは、
1.1倍に拡大
です。
ボタンを少し大きくする
.button {
transition: 0.3s;
}
.button:hover {
transform: scale(1.05);
}
ほんの少し大きくするだけでも、
操作できる感
が強くなります。
scale の数字の意味
scale(1)
は元のサイズです。
つまり、
1 = 100%
です。
例えば、
scale(0.5)
なら半分です。
scale(2)
なら2倍です。
rotate
rotate は回転です。
transform: rotate(45deg);
これは、
45度回転
です。
deg は degree（度）です。
アイコンを回転させる
.icon:hover {
transform: rotate(180deg);
}
最近のWebサイトでは、
- 矢印
- メニューアイコン
- プラスボタン
などでよく使われます。
transform は上書きされる
ここは初心者がかなりつまずきます。
例えば、
transform: translateY(-10px);
のあとに、
transform: scale(1.1);
を書くと、
translateY が消える
という動きになります。
transform はまとめて書く
複数使う場合は、1行にまとめます。
transform: translateY(-10px) scale(1.1);
これで、
- 上へ移動
- 拡大
を同時に行えます。
transition と組み合わせる
transform は、transition と組み合わせることが非常に多いです。
.card {
transition: 0.3s;
}
.card:hover {
transform: translateY(-8px) scale(1.02);
}
これだけで、かなり「今風」の動きになります。
よくある使い方
実際のWeb制作では、
hover + transform + transition
は大量に使われています。
例えば、
- カードを浮かせる
- ボタンを押し込む
- 画像をズームする
- アイコンを回転する
などです。
画像をズームする例
<div class="image-box">
<img src="image.jpg" alt="">
</div>
.image-box {
overflow: hidden;
border-radius: 12px;
}
.image-box img {
width: 100%;
transition: 0.5s;
}
.image-box:hover img {
transform: scale(1.1);
}
overflow: hidden が必要な理由
拡大すると、
画像がはみ出す
ことがあります。
そのため、
overflow: hidden;
で、外へはみ出た部分を隠しています。
これはかなりよく使うテクニックです。
まとめ
今回は transform を学びました。
translateは移動scaleは拡大・縮小rotateは回転transitionと組み合わせると自然な動きになるtransformは複数まとめて書く