CSS Transform Generator
移動・回転・スケール・スキューを視覚的に組み合わせ、任意の原点で CSS transform を生成してコピーできます。
1 つまたは 2 つの値：キーワード（left・center・right・top・bottom）、パーセントまたは長さ（例: 50% 50% や left top）。
生成された CSS
関数は移動・回転・スケール・スキューの順で出力され、控件と対応します。プレビューの四角は 96 px です。CSS を他の要素に適用しても値は変わりませんが、見た目の幅度は要素サイズに応じて変わります。
使い方
- 移動 X・Y（px）を設定してボックスを動かします。
- 回転（deg）を設定して原点の周りに回します。
- スケール X・Yを設定します。1 未満で縮小、1 超で拡大です。
- スキュー X・Y（deg）を設定して傾けます。
- 変換原点で支点を移動できます（例:
left topや20% 80%）。1 つの値だけの入力では 2 つ目が center になります。 - 入力するたびに四角が更新されるので、確認して CSS をコピーします。
こんなときに
- ホバー・押下状態: カードを少し移動して持ち上げる、ボタンをホバーで傾ける。
- バッジ・リボンの角度: 隅のラベルを回転させて配置する。
- アイコンの動き: フォーカス時にアイコンを拡大し、レイアウトは変えない。
- 斜めの区切り: skewY で装飾の帯を傾ける。
- 支点の実験: 同じ回転でも原点を変えると印象が変わる。
プライバシーについて
transform 文字列はこのページ内で入力値から組み立てられ、プレビュー要素に適用されます。データの送信はなく、オフラインでも動作します。
FAQ
Q: 関数の適用順は？ A: CSS は左から右へ行列を掛け合わせるため、一番左の関数が最後に作用します。ツールは移動・回転・スケール・スキューの順で出力し、控件と対応しています。別の合成が必要な場合は、コピーした CSS の順序を手で入れ替えてください。
Q: transform-origin に何を指定できますか？ A: 1 つまたは 2 つの値です。キーワード（left・center・right・top・bottom）、パーセント、長さのいずれかです。1 つだけの指定では 2 つ目が center になり、空の場合は 50% 50% にフォールバックします。
Q: 3D に対応していますか？ A: いいえ。対象は 2D の移動・回転・スケール・スキューだけです。perspective や 3D 回転は手で関数を追加してください。
Q: プレビューは自分のページと同じですか？ A: プレビューの四角は同じ transform と origin を使うので、動きは一致します。四角は 96 px です。サイズの違う要素に CSS を適用しても値は変わりませんが、見た目の幅度は要素サイズに応じて変わります。
データはこのデバイス内にとどまります
CSS Transform Generator は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。