CSS transformの使い方｜移動・回転・拡大・傾きと適用順の基本
公開日：2026年10月15日 更新日：2026年9月15日 運営：シルギア（アナライズギア株式会社） 対象ツール：CSS transformジェネレーター
CSS の transform は、要素が本来占めるスペースを変えずに、見た目だけを移動・回転・拡大縮小・傾斜させるプロパティです。margin や top で動かすとレイアウト（周囲の配置）が崩れますが、transform は要素だけを画面上でずらすため、ホバー効果やアニメーションを軽快に見せられます。このジェネレーターはスライダーと数値で 2D の transform を組み立て、右側のライブプレビューで結果を確かめながら、既定値から変えた分だけを整った順序でコード化します。まずは各関数の意味から押さえましょう。
4つの基本関数（translate・rotate・scale・skew）
2D transform の中心になるのは次の4種類です。
- translateX(px) / translateY(px)：横・縦の平行移動。正の値で右・下へ動きます。
- rotate(deg)：基準点まわりの回転。正の値で時計回りです。
- scaleX / scaleY（またはまとめて scale）：拡大縮小。1が等倍、1.5で1.5倍、0.5で半分です。
- skewX(deg) / skewY(deg)：要素を平行四辺形状に傾けます。
scale にマイナスを入れると鏡像（反転）になり、scaleX(-1) は左右反転、scaleY(-1) は上下反転を表します。skew は角度が 90 度に近づくほど極端に潰れるため、実用上は数十度までに収めるのが自然です。ツールでは縦横の拡大率のリンクを外すと scaleX と scaleY を個別に設定できます。
transform-origin が決める「変形の軸」
transform-origin は、回転や拡大が「どの点を軸に」効くかを決めるプロパティです。既定は要素の中央（center）で、回転も拡大も中心を保ったまま行われます。これを top left や 0% 0% にすると左上を固定した変形になり、扉の開閉やメーターの針のような、片側を留めた動きを作れます。ドロップダウンを上端から開くアニメーションなら top center が向きます。ツールでは中央・四隅などのキーワードに加えて % での細かな指定にも対応しているので、狙った軸を探しながら決められます。
適用順で結果が変わる理由
複数の関数はスペース区切りで1つの transform にまとめますが、並べた順番で最終結果が変わります。transform は座標系そのものを順に変換していくためです。具体例で見ましょう。
translateX(100px) rotate(45deg) は、先に右へ100px動かし、その位置で回転します。中心は (100, 0) に来て、その場でくるりと回るイメージです。
一方 rotate(45deg) translateX(100px) は、先に座標軸ごと45度回してから、その傾いた軸に沿って100px進みます。移動方向が右下45度になるので、中心の座標は横に 100×cos45°、縦に 100×sin45° 進みます。cos45°もsin45°も約0.707なので、中心はおよそ (70.7, 70.7) に着きます。同じ関数・同じ数値でも、順番が違うだけで着地点が (100, 0) と (70.7, 70.7) にずれるわけです。ツールは変更した関数だけを translate → rotate → scale → skew の一般的な順で出力します。狙いが違うときは、出力後に手で並べ替えてください。
実際のCSS例で組み立てる
たとえばボタンをホバーで少し持ち上げつつ拡大するなら、次のように書けます。
- 通常時のルール：transform: none; transition: transform .3s;
- ホバー時：.btn:hover { transform: translateY(-4px) scale(1.05); }
transition を通常側に置くのがコツで、こうすると入るときも戻るときも滑らかに変化します。カードを軽く傾けたいなら transform: rotate(-3deg) skewX(4deg);、アイコンを左右反転させたいなら transform: scaleX(-1); だけで済みます。回転の軸を変えたい場合は transform-origin: top left; のように、transform と同じルール内に添えます。ツールで作った行をそのまま対象要素のCSSへ貼り付ければ動きます。
2D transform の使いどころ
2D transform は装飾的なUIと相性が良い機能です。
- ボタンやカードのホバーで少し拡大・浮上させる。
- クリックしたアイコンを回す、開閉ボタンの矢印を反転させる。
- 通知バッジや吹き出しを軽く傾けて視線を誘導する。
- 画像やアイコンを scaleX(-1) で対称に並べる。
transition や @keyframes と組み合わせると滑らかなアニメーションになります。奥行き（3D）を出したいときは perspective や rotateY などの3D系関数を使いますが、日常的なUIの多くは2Dで十分表現できます。
パフォーマンスとよくある失敗
transform と opacity の変化は、多くのブラウザでレイアウトや再描画をやり直さずに合成（コンポジット）だけで処理でき、GPU に載せやすいのが利点です。位置を top/left で動かすとリフロー（再レイアウト）が起きて重くなりますが、transform: translate() ならリフローを避けられるので、移動アニメーションは transform で行うのが定石です。よくある失敗としては、複数のtransformを別々に指定して片方が上書きされてしまう（1つのプロパティにまとめて書く必要があります）、順番を意識せずに位置がずれる、transform-origin を変えたのに transform 側で打ち消してしまう、skew を大きくしすぎて文字が読めなくなる、といった点が挙げられます。まずはこのツールで数値を動かし、プレビューで挙動を体で覚えてからコードに落とすと、狙い通りの変形にたどり着きやすくなります。