要素の変形（移動、回転、拡大縮小など）を指定するプロパティです。translate()、rotate()、scale()、skew()などの関数を使用し、3D変形も可能です。アニメーションやインタラクティブなデザインに不可欠です。
transform: <transform-function>| 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クラスの前置は不要。
.element {
transform: rotate(0deg) scale(1);
}.hover-lift {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}ホバー時の浮き上がり効果 - カードやボタンによく使用
.zoom-in {
transform: scale(1.1);
transition: transform 0.2s ease;
}ズームイン効果 - 画像や要素の拡大表示
.rotate-icon {
transform: rotate(90deg);
transition: transform 0.3s ease;
}アイコンの回転 - 矢印やメニューアイコンの状態変更
.center-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}完全中央配置 - absolute要素の中央揃え
.flip-card {
transform: rotateY(180deg);
transform-style: preserve-3d;
}3D回転効果 - カードフリップアニメーション
.skew-text {
transform: skew(-15deg, 0);
display: inline-block;
}斜体変形 - 動的なテキスト効果
GPUアクセラレーションが効くため、アニメーションパフォーマンスが良い。
transformは1プロパティなので、hover時にtransform: scale()だけ書くと既存のtranslate()が消える上書き事故が定番です。現在はtranslate/rotate/scaleが個別プロパティとして独立しており（全ブラウザ対応）、AIはこの新しい書き方を知らないことがあります。
translateで中央寄せした要素にhoverでscaleを追加したら位置がずれた。個別プロパティ（translate/scale）で書き直して
このtransformの多重指定を、個別のtranslate/rotate/scaleプロパティに分解して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。