CSS transformの使い方 — translate・rotate・scale・skewと3Dモード
CSS transformはJavaScriptを使わずに要素の移動・回転・拡大縮小・傾斜をGPUアクセラレーションで実行できます。レイアウトに影響を与えずにアニメーションできるため、高パフォーマンスなUIエフェクトの基本技術です。
translate・rotate・scale・skewの基本
translateX(50px) は要素を右に50pxずらします。translateY(-20px) は上に20pxです。rotate(45deg) は45度時計回りに回転します。scale(1.5) は1.5倍に拡大します（scale(2, 0.5) で横2倍・縦0.5倍）。skewX(15deg) はX軸方向に15度傾斜させます。複数のtransformは半角スペースで連結してtransform: translate(10px, 20px) rotate(30deg) scale(1.1) のように書きます。
transform-originとは
transform-originは変形の基点を指定します。デフォルトはcenter（50% 50%）で要素の中心が基点です。transform-origin: top left にするとrotateが左上を軸に回転します。時計の秒針のようなアニメーションはtransform-origin: center bottom + rotate で実現できます。9点グリッドや具体的な座標（px・%）で指定できます。
3D transformとperspective
CSS transformは3Dも扱えます。rotateX()・rotateY()・rotateZ()で各軸の回転、translateZ()で奥行き方向の移動が可能です。3D効果を有効にするには親要素にperspective（例: perspective: 500px）を設定する必要があります。値が小さいほど誇張された透視効果になります。カードフリップアニメーションはrotateY(180deg) とbackface-visibility: hidden で実装します。
transformとlayoutの関係
CSS transformはレイアウト（通常フロー）に影響を与えません。transformで移動・拡大した要素は周囲の要素の位置に影響しません。これは頻繁に動くアニメーションに有利で、top/left変更（レイアウト再計算が発生）よりtransformを使う方が高パフォーマンスです。Googleのパフォーマンスガイドラインでもアニメーションにはtransformとopacityを推奨しています。