CSS ・ アニメーション
transform
移動・回転・拡大
要素を移動・回転・拡大縮小・傾斜させます。周りのレイアウトには影響せず、見た目だけが変わります。ボタンのホバー時のアクションや、バナーなどのアクセントとして盛り込むと効果的です。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box">元の状態</div>
3 <div class="box move">translate</div>
4 <div class="box rotate">rotate</div>
5 <div class="box scale">scale</div>
6</div>
CSS
1.row {
2 display: flex;
3 gap: 24px;
4 padding: 16px 0;
5}
6.box {
7 width: 90px;
8 padding: 14px 0;
9 text-align: center;
10 background: #b68235;
11 color: #fff;
12 font-size: 13px;
13}
14.move {
15 transform: translate(10px, -10px);
16}
17.rotate {
18 transform: rotate(15deg);
19}
20.scale {
21 transform: scale(1.2);
22}
02
実行結果
ブラウザでの表示
03
解説
transform（「変化」「変身」という意味）は、要素の形や位置を変える（変形する）プロパティです。translate() で移動、rotate() で回転、scale() で拡大縮小、skew() で傾斜させます。
変形しても元の場所はそのまま確保されるため、周りの要素は動きません。見た目だけが変わるので、アニメーションに向いています。
スペース区切りで複数の変形を組み合わせられます。書いた順番によって結果が変わる点に注意します。
04
応用例・注意点
よく使う関数
| 関数 | 説明 |
|---|---|
translate(x, y) | 移動（translateX・translateY もある） |
rotate(15deg) | 回転（deg は角度の単位） |
scale(1.2) | 拡大・縮小（1 が等倍） |
skew(10deg) | 傾斜 |
translate(-50%, -50%) | 自分の大きさの半分だけ戻す（中央寄せで使う） |
ホバーで少し拡大する
transition と組み合わせると、なめらかに拡大します。
CSS
1.thumb img {
2 transition: transform .3s ease;
3}
4.thumb:hover img {
5 transform: scale(1.05);
6}
注意点
- 01transform を指定した要素は、position: fixed の子要素の基準になるなど、副作用があります。
- 02インライン要素（span など）には効きません。display: inline-block などに変えます。
05
translate・rotate・scale・skew の種類
translate：移動
| 関数 | 意味 |
|---|---|
| translate(x, y) | X軸とY軸をまとめて移動 |
| translateX() | X軸（横軸）への移動 |
| translateY() | Y軸（縦軸）への移動 |
| translateZ() | Z軸（奥行き）への移動 |
| translate3d(x, y, z) | X・Y・Z の3方向をまとめて移動。立体的な表現に使う |
※ translateZ を使うには、親要素に perspective プロパティを設定する 必要があります。設定しないと、奥行き方向に動いても見た目が変わりません。
rotate：回転
| 関数 | 意味 |
|---|---|
| rotate() | オブジェクトの中心を軸に回転（rotateZ と同じ） |
| rotateX() | X軸を軸に回転（上下に倒れるように回る） |
| rotateY() | Y軸を軸に回転（左右に回る） |
| rotateZ() | Z軸（中心を基点）に回転 |
| rotate3d(x, y, z, 角度) | X軸・Y軸・Z軸を一括で設定して回転 |
scale：拡大・縮小
| 関数 | 意味 |
|---|---|
| scale() | X・Y 両方向への拡大・縮小（1 が等倍、1.5 で1.5倍） |
| scaleX() | X軸（横方向）への拡大・縮小 |
| scaleY() | Y軸（縦方向）への拡大・縮小 |
| scale3d(x, y, z) | X軸・Y軸・Z軸のすべての方向への拡大・縮小を一括で設定 |
scale3d について
translate3dやrotate3dと同じく、3D 空間での拡大・縮小を表現できます。x：横方向、y：縦方向、z：奥行き方向のスケールを指定します。- scale3d は単体で使わず、rotateX や rotateY と組み合わせて使います。 通常の HTML の要素には厚みがないため、Z 軸方向の変化が見た目ではわからないからです。
skew：傾斜
| 関数 | 意味 |
|---|---|
| skew(x, y) | X・Y 両方向に傾斜をつける |
| skewX() | X軸（横方向）に傾斜をつける |
| skewY() | Y軸（縦方向）に傾斜をつける |
例：4種類の変形をホバーで試す
スライドと同じ値です。それぞれの箱にマウスを乗せると変形します。
HTML
1<div class="row">
2 <div class="box t">translateX</div>
3 <div class="box r">rotate</div>
4 <div class="box s">scale</div>
5 <div class="box k">skewX</div>
6</div>
CSS
1.row {
2 display: flex;
3 gap: 40px;
4 padding: 30px 20px;
5}
6.box {
7 width: 80px;
8 padding: 14px 0;
9 text-align: center;
10 background: #b68235;
11 color: #fff;
12 font-size: 12px;
13 transition: transform .3s ease;
14}
15.t:hover {
16 transform: translateX(50px);
17}
18.r:hover {
19 transform: rotate(45deg);
20}
21.s:hover {
22 transform: scale(1.5);
23}
24.k:hover {
25 transform: skewX(45deg);
26}
ブラウザでの表示
コードと表示の対応
translateX(50px)右に50px移動します。rotate(45deg)中心を軸に45度回転します。scale(1.5)縦横1.5倍に拡大します。skewX(45deg)横方向に45度傾きます。