CSSトランスフォームは何ができるのか？

Question

Accepted Answer

The `transform` property lets you **move, scale, rotate, and skew** an element visually — without affecting the document layout (other elements don't shift). It's GPU-accelerated, making it ideal for animation.

```css
.box { transform: translate(50px, 20px); }  /* move right 50px, down 20px */
.box { transform: scale(1.5); }              /* 1.5× bigger (0.5 = half) */
.box { transform: rotate(45deg); }           /* rotate clockwise 45° */
.box { transform: skew(10deg); }             /* slant */
```

## なぜ重要なのか

```css
.box {
  transform: translateX(100px) rotate(45deg) scale(1.2);
  /* applied right-to-left: scale, then rotate, then translate */
}
```

複数の関数が順番に適用されます。順序を変えるとその結果も変わります（回転してから平行移動するのと、平行移動してから回転するのは異なります）。

## トランスフォームがレイアウトを乱さない理由

```css
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
```

`width`/`margin` を変更するのとは異なり、トランスフォームはその要素の*描画*外観のみに影響し、フロー内のボックスには影響しません。そのため、周囲の要素は静止したままで、リフローは発生しません。これがトランスフォームがスムーズな理由です。

## 一般的なパターン

```css
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* hover lift */
.card:hover { transform: translateY(-4px); }

/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
```

`translate(-50%, -50%)` センタリングトリックはどこにでもあります。これは要素をその*自身の*サイズの半分だけ戻します。

## パフォーマンス

```css
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
```

トランスフォームはレイアウトと描画をスキップするため（コンポジティングのみ）、アニメーション化しても 60fps を維持します。これは position/size をアニメーション化するよりもはるかに安価です。

## なぜ重要なのか

トランスフォームは CSS アニメーションとマイクロインタラクション（ホバーリフト、モーダル、カルーセル、ローディングスピナー）の主力です。

レイアウトをトリガーせずに移動/スケール/回転するため、強力かつパフォーマントです。ウェブ上でモーション をアニメーション化する推奨方法です。