🔄 CSS transformジェネレーター
要素を移動・回転・拡大縮小・傾ける CSS の transform を、スライダーで調整しながら作成できます。右のプレビューにリアルタイムで反映され、既定値から変更した分だけを整った順序でコード出力・コピーできます。すべてブラウザ内で完結します。
transform の調整
ライブプレビュー
うすい「元」の位置が変形前、色付きが変形後です。
生成された CSS
transform: none;
既定値（移動0・拡大1・回転0・傾き0）からの変更分だけを、translate → rotate → scale → skew の順で出力します。
⚠️ 関数を並べる順番で結果が変わります
transform は左から右へ順に適用されます。たとえば translateX(100px) rotate(45deg) は「右へ動かしてから回す」のに対し、rotate(45deg) translateX(100px) は「回してから、傾いた座標系のまま右へ動かす」ため、最終的な位置がまったく変わります。同じ関数の組み合わせでも順番が違えば見た目が変わる点に注意してください。本ツールは translate → rotate → scale → skew の順で出力します。狙いが違う場合は、出力後に手で並べ替えてください。
解説
CSS の transform プロパティは、要素のレイアウト（周囲の要素が占める場所）を保ったまま、その要素だけを見た目上で移動・回転・拡大縮小・傾斜させる仕組みです。margin や top による移動と違ってドキュメントのフローに影響を与えず、GPU で処理されやすいため、アニメーションやホバー効果を軽快に見せたいときに向いています。本ツールは 2D の transform を対象に、各関数をスライダーと数値で調整し、結果をその場でプレビューしながらコードを組み立てます。
translateX(px)・translateY(px) は横・縦の平行移動、rotate(deg) は基準点まわりの回転、scaleX・scaleY（または縦横まとめての scale）は拡大縮小です。scale に負の値やマイナス方向を使うと反転（鏡像）になり、たとえば scaleX(-1) は左右反転を意味します。skewX(deg)・skewY(deg) は要素を平行四辺形状に傾けます。角度は 90° に近づくほど極端に潰れるため、実用上は数十度までに収めるのが自然です。
transform-origin は、これらの変形が「どの点を軸に」効くかを決めるプロパティです。既定は要素の中央（center）で、回転や拡大は中心を保ったまま行われます。これを top left や 0% 0% にすると左上を固定した回転・拡大になり、時計の針のような動きや、片側を留めた開閉アニメーションを表現できます。本ツールでは代表的なキーワードに加えて、% での細かな指定にも対応しています。
複数の関数はスペース区切りで1つの transform にまとめて書きます。このとき適用順（並び順）で結果が変わる点が最大の注意点です。本ツールは既定値から変更した関数だけを translate → rotate → scale → skew の一般的な順序で出力するので、コードが短く読みやすくなります。生成結果はそのまま CSS に貼り付けられ、transition: transform .3s; などと組み合わせればホバーやクリックで滑らかに動くUIになります。入力内容はサーバーに送信されず、すべて端末内で処理されます。
よくある質問
translate と margin・position の移動は何が違いますか？
translate は要素が本来占めるスペースを変えずに見た目だけを動かします。周囲の要素は動かないため、レイアウトを崩さずにアニメーションできます。margin や top/left は実際の配置を変えるので再レイアウト（リフロー）が起き、動きが重くなりがちです。移動アニメーションには transform が向いています。
関数を並べる順番はなぜ結果に影響するのですか？
transform は座標系そのものを順番に変換していくためです。先に rotate すると座標軸ごと回転し、その後の translate は傾いた軸に沿って動きます。逆順なら移動してから回るので位置が変わります。狙った動きにするには順番を意識し、必要なら本ツールの出力を手で並べ替えてください。
scaleX(-1) のように反転させるには？
拡大率にマイナスを入れると鏡像（反転）になります。scaleX(-1) は左右反転、scaleY(-1) は上下反転です。本ツールの「左右反転」「上下反転」プリセットがこれにあたります。アイコンの向きを変えたり、片方の要素を対称に配置したいときに便利です。
transform-origin はどんなときに変えますか？
回転や拡大の「軸」をずらしたいときです。既定の中央では中心を保って回りますが、top left にすると左上を留めた回転になり、扉の開閉やメーターの針のような動きを作れます。ドロップダウンを上端から開くアニメーションなどでも基準点の調整が効きます。
2D の transform はどんな場面で使いますか？
ボタンのホバーで少し拡大する、カードをクリックで傾ける、アイコンを回す、通知バッジを軽く動かす、といったUIの装飾が代表例です。transition や @keyframes と組み合わせると滑らかなアニメーションになります。奥行き（3D）を出したい場合は perspective や rotateY など3D系関数を使いますが、日常的なUIの多くは2Dで十分表現できます。
transform はなぜ「軽い」と言われるのですか？
transform と opacity の変化は、多くのブラウザでレイアウトや再描画をやり直さずに合成（コンポジット）だけで処理でき、GPU に載せやすいためです。位置を top/left で動かすとリフローが起きますが、transform: translate() ならそれを避けられるので、アニメーションが滑らかになります。
生成されたコードはそのまま使えますか？
はい。出力された transform:（と必要に応じて transform-origin:）の行を、対象要素のCSSルールにそのまま貼り付けてください。ホバーで効かせたい場合は :hover セレクタ側に置き、元のルールに transition: transform .3s; を加えると滑らかに変化します。
入力した値は保存・送信されますか？
送信されません。すべての計算はブラウザ内で完結し、値がサーバーへ送られることはありません。オフラインでも利用できます。
解説
CSS の transform プロパティは、要素のレイアウト（周囲の要素が占める場所）を保ったまま、その要素だけを見た目上で移動・回転・拡大縮小・傾斜させる仕組みです。margin や top による移動と違ってドキュメントのフローに影響を与えず、GPU で処理されやすいため、アニメーションやホバー効果を軽快に見せたいときに向いています。本ツールは 2D の transform を対象に、各関数をスライダーと数値で調整し、結果をその場でプレビューしながらコードを組み立てます。
translateX(px)・translateY(px) は横・縦の平行移動、rotate(deg) は基準点まわりの回転、scaleX・scaleY（または縦横まとめての scale）は拡大縮小です。scale にマイナス方向の値を使うと反転（鏡像）になり、たとえば scaleX(-1) は左右反転を意味します。skewX(deg)・skewY(deg) は要素を平行四辺形状に傾けます。角度は 90 度に近づくほど極端に潰れるため、実用上は数十度までに収めるのが自然です。
transform-origin は、これらの変形が「どの点を軸に」効くかを決めるプロパティです。既定は要素の中央（center）で、回転や拡大は中心を保ったまま行われます。これを top left や 0% 0% にすると左上を固定した回転・拡大になり、時計の針のような動きや、片側を留めた開閉アニメーションを表現できます。本ツールでは代表的なキーワードに加えて、% での細かな指定にも対応しています。
複数の関数はスペース区切りで1つの transform にまとめて書きます。このとき適用順（並び順）で結果が変わる点が最大の注意点です。たとえば translateX(100px) rotate(45deg) と rotate(45deg) translateX(100px) は最終的な位置が異なります。本ツールは既定値から変更した関数だけを translate → rotate → scale → skew の一般的な順序で出力するので、コードが短く読みやすくなります。狙いが違う場合は出力後に手で並べ替えてください。入力内容はサーバーに送信されず、すべて端末内で処理されます。
よくある質問
translate と margin・position の移動は何が違いますか？
translate は要素が本来占めるスペースを変えずに見た目だけを動かします。周囲の要素は動かないため、レイアウトを崩さずにアニメーションできます。margin や top/left は実際の配置を変えるので再レイアウト（リフロー）が起き、動きが重くなりがちです。移動アニメーションには transform が向いています。
関数を並べる順番はなぜ結果に影響するのですか？
transform は座標系そのものを順番に変換していくためです。先に rotate すると座標軸ごと回転し、その後の translate は傾いた軸に沿って動きます。逆順なら移動してから回るので位置が変わります。狙った動きにするには順番を意識し、必要なら本ツールの出力を手で並べ替えてください。
scaleX(-1) のように反転させるには？
拡大率にマイナスを入れると鏡像（反転）になります。scaleX(-1) は左右反転、scaleY(-1) は上下反転です。本ツールの「左右反転」「上下反転」プリセットがこれにあたります。アイコンの向きを変えたり、片方の要素を対称に配置したいときに便利です。
transform-origin はどんなときに変えますか？
回転や拡大の「軸」をずらしたいときです。既定の中央では中心を保って回りますが、top left にすると左上を留めた回転になり、扉の開閉やメーターの針のような動きを作れます。ドロップダウンを上端から開くアニメーションなどでも基準点の調整が効きます。
2D の transform はどんな場面で使いますか？
ボタンのホバーで少し拡大する、カードをクリックで傾ける、アイコンを回す、通知バッジを軽く動かす、といったUIの装飾が代表例です。transition や @keyframes と組み合わせると滑らかなアニメーションになります。奥行き（3D）を出したい場合は perspective や rotateY など3D系関数を使いますが、日常的なUIの多くは2Dで十分表現できます。
transform はなぜ「軽い」と言われるのですか？
transform と opacity の変化は、多くのブラウザでレイアウトや再描画をやり直さずに合成（コンポジット）だけで処理でき、GPU に載せやすいためです。位置を top/left で動かすとリフローが起きますが、transform: translate() ならそれを避けられるので、アニメーションが滑らかになります。
生成されたコードはそのまま使えますか？
はい。出力された transform:（と必要に応じて transform-origin:）の行を、対象要素のCSSルールにそのまま貼り付けてください。ホバーで効かせたい場合は :hover セレクタ側に置き、元のルールに transition: transform .3s; を加えると滑らかに変化します。
入力した値は保存・送信されますか？
送信されません。すべての計算はブラウザ内で完結し、値がサーバーへ送られることはありません。オフラインでも利用できます。