transformで要素を動かす

このページの目的

CSSのtransformプロパティを使い、HTML要素を移動・回転・拡大縮小・傾斜させる方法を学びます。
このプロパティと、transitionやanimationを組み合わせることで、Webサイトにインタラクティブな動きを加えることができます。

---

smart_display動作サンプル：ホバーエフェクト

以下のサンプルにマウスカーソルを乗せて、様々なtransformの動きを確認してみてください。すべてCSSだけで作られています。

このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。

<!-- HTML -->
<div class="box">Hover Me!</div>

<!-- CSS -->
.box {
  transition: transform 0.3s ease-out; /* 0.3秒かけて変化させる */
}
/* ホバーした時の動き */
.box:hover {
  transform: translateY(-5px); /* 上に5px移動 */
}

---

buildtransformで使える主な関数

transformプロパティには、以下のような「変形関数」を指定することで、様々な動きを表現します。

translate(x, y)

【移動】要素を水平方向（X軸）と垂直方向（Y軸）に移動させます。translateX(x)やtranslateY(y)のように、個別に指定することも可能です。

rotate(角度)

【回転】要素を回転させます。角度はdeg（度）という単位で指定します。（例: 45deg）

scale(x, y)

【拡大・縮小】要素を水平方向（X軸）と垂直方向（Y軸）に拡大・縮小します。1が等倍で、1.2なら1.2倍、0.8なら0.8倍になります。

skew(x角度, y角度)

【傾斜】要素を平行四辺形のように歪ませます。こちらも角度はdegで指定します。

これらの関数は、半角スペースで区切って複数同時に指定することも可能です。
例： transform: translateX(50px) rotate(10deg) scale(1.1);

---

warningよくある間違いと対策

アニメーションがカクカクする

marginやtop/leftプロパティで移動アニメーションを行うと、再描画のコストが高く、動きが滑らかにならないことがあります。移動には、パフォーマンスの良いtransform: translate();を使いましょう。

transformで要素を動かしたら、元の場所の余白が残ってしまった

transformは、要素の見た目を変えるだけで、レイアウト上の位置や大きさは元のままです。そのため、要素が動いても、元の場所は確保されたままになります。レイアウト自体を変更したい場合は、marginやpositionを使いましょう。

複数のtransformを上書きしてしまう

transform: rotate(45deg); transform: scale(1.2);のように複数行で書くと、後に書いたものだけが適用されます。複数の変形を適用したい場合は、transform: rotate(45deg) scale(1.2);のように、半角スペースで区切って一行で記述する必要があります。

---