EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS Transform

Transform関数

早見表

関数 値 効果
translate(x, y) 50px、-30px、50% 要素の移動
translateX(x) 50px 水平方向の移動
translateY(y) -30px 垂直方向の移動
scale(n) 1.5、2、0.5 スケール（1 = オリジナル）
scaleX(n) 1.5 水平方向のスケール
scaleY(n) 0.8 垂直方向のスケール
rotate(deg) 45deg、90deg、-180deg 回転（正 = 時計回り）
skew(x, y) 10deg、-5deg 傾斜歪み
skewX(deg) 10deg 水平方向の傾斜
skewY(deg) 10deg 垂直方向の傾斜
transform-origin center、top left、50% 50% 変換の原点

translate（移動）

サンプル

HTML 
<style>
.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  transition: transform 0.3s;
}
.box:hover {
  transform: translate(50px, 20px);
}
</style>
<div class="box">ホバーで移動</div>
▶ 試してみよう

scale（サイズ変更）

サンプル

HTML 
<style>
.box {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.5);
}
</style>
<div class="box">ホバーで拡大</div>
▶ 試してみよう

rotate（回転）

サンプル

HTML 
<style>
.box {
  width: 100px;
  height: 100px;
  background: #2ecc71;
  transition: transform 0.3s;
}
.box:hover {
  transform: rotate(45deg);
}
</style>
<div class="box">ホバーで回転</div>
▶ 試してみよう

transform-origin

回転/スケールの基準点を変更：

サンプル

HTML 
<style>
.box {
  width: 100px;
  height: 100px;
  background: #9b59b6;
  transform-origin: top left;
  transition: transform 0.3s;
}
.box:hover {
  transform: rotate(45deg);
}
</style>
<div class="box">左上隅から回転</div>
▶ 試してみよう

変換の組み合わせ

複数の変換は右から左（逆順）に実行：

CSS 
.box {
  transform: translateX(50px) rotate(45deg) scale(1.2);
  /* まずスケール → 次に回転 → 最後に移動 */
}

❓ よくある質問

Q transformとtop/leftの変更の違いは何ですか？
A transformは合成段階のみをトリガーし、レイアウトやペイントリフローを引き起こさないため、パフォーマンスが向上します。top/leftの変更はリフローをトリガーし、ページのラグを引き起こします。アニメーションにはtransformを優先してください。
Q position: absoluteとtransform: translate(-50%, -50%)の組み合わせはどういう意味ですか？
A 古典的な中央揃えソリューションです。`top: 50%; left: 50%; transform: translate(-50%, -50%);`は、まず要素の左上隅を親の中央に配置し、その後translateで自身の寸法の半分だけ戻して完璧な中央揃えを実現します。
Q 3D変換には特別な設定が必要ですか？
A `translateZ()`、`rotateX()`、`rotateY()`などを使用する場合は、親に`perspective`を追加してください（例：`perspective: 1000px`）。さもないと3D効果が表示されない場合があります。3D変換はGPUアクセラレーションをトリガーし、2Dよりパフォーマンスが向上します。

📖 まとめ

📝 演習

  1. ホバー時に右に50px移動し、1.5倍にスケールするボックスを作成してください。
  2. ホバー時にY軸を中心に180°回転する画像を作成してください（perspectiveが必要）。
  3. 「フリップカード」を作成してください——ホバーでカードが裏返って裏のコンテンツを表示します（rotateYとbackface-visibilityを使用）。
  4. transform-originで回転中心を変更し、「振り子」エフェクトを作成してください。
100%