# transform

> 要素の変形（移動、回転、拡大縮小など）を指定するプロパティです。translate()、rotate()、scale()、skew()などの関数を使用し、3D変形も可能です。アニメーションやインタラクティブなデザインに不可欠です。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/transform/

## 構文

```css
transform: <transform-function>
```

## Tailwindでは

- `scale-105` → scale: 1.05
- `rotate-45` → rotate: 45deg
- `translate-x-4` → translate: 16px 0
- `-translate-y-2` → translate: 0 -8px
- 一般形: `scale-{n} / rotate-{deg} / translate-{x|y}-{n}`
- 任意値: `translate-x-[5px]`
- 補足: v4は個別プロパティ（scale/rotate/translate）で出力される。v3のようなtransformクラスの前置は不要。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 36+ / Firefox 16+ / Safari 9+ / Edge 12+

## コード例

### 例1: ホバー時の浮き上がり効果 - カードやボタンによく使用

```css
.hover-lift {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
```

### 例2: ズームイン効果 - 画像や要素の拡大表示

```css
.zoom-in {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
```

### 例3: アイコンの回転 - 矢印やメニューアイコンの状態変更

```css
.rotate-icon {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}
```

### 例4: 完全中央配置 - absolute要素の中央揃え

```css
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

### 例5: 3D回転効果 - カードフリップアニメーション

```css
.flip-card {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}
```

### 例6: 斜体変形 - 動的なテキスト効果

```css
.skew-text {
  transform: skew(-15deg, 0);
  display: inline-block;
}
```

## TIPS

GPUアクセラレーションが効くため、アニメーションパフォーマンスが良い。

## AIがよく間違えるポイント

transformは1プロパティなので、hover時にtransform: scale()だけ書くと既存のtranslate()が消える上書き事故が定番です。現在はtranslate/rotate/scaleが個別プロパティとして独立しており（全ブラウザ対応）、AIはこの新しい書き方を知らないことがあります。

## AIへの依頼文例

- translateで中央寄せした要素にhoverでscaleを追加したら位置がずれた。個別プロパティ（translate/scale）で書き直して
- このtransformの多重指定を、個別のtranslate/rotate/scaleプロパティに分解して

## 関連プロパティ

- [transition](https://www.css-dictionary.com/property/transition.md)