CSS transform ジェネレーター
9 つの入力で translate・scale・rotate・skew と transform-origin を設定します。キー入力ごとにステージが再描画され、「CSS をコピー」で整った transform 宣言をクリップボードへ入れられます。
ブラウザ内でローカルに実行 · translate · rotate · scale · skew
CSS
9 つの入力で translate・scale・rotate・skew と transform-origin を設定します。キー入力ごとにステージが再描画され、「CSS をコピー」で整った transform 宣言をクリップボードへ入れられます。
ブラウザ内でローカルに実行9 つの入力が 1 つの 2D トランスフォームを組み立てます。translateX / translateY は px（-240〜240）、scaleX / scaleY は -3〜3、rotate は -360〜360 度、skewX / skewY は -89〜89 度、transform-origin の X / Y は 0〜100 % です。キー入力のたびにステージのカードが再描画され、コード欄には「CSS をコピー」がクリップボードへ入れる文字列がそのまま表示されます。
書き出しは translate → rotate → skew → scale の固定順で、初期値のままの関数は省かれます。そのため未編集のページは transform: none を書き出します。ブラウザ検証では、省略後の文字列が省略前と同じ行列になることを確認しました（translate(77px, 0px) 単独と translate(77px, 0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1) はどちらも matrix(1, 0, 0, 1, 77, 0)）。
ワークベンチは translate(...)、rotate(...)、skew(...)、scale(...) の順に出力します。初期値のままの関数は書き出しから外れ、移動だけの編集では transform: translate(77px, 0px) になり、何も設定していなければ transform-origin 行を伴わず transform: none; になります。
この順序には意味があります。ブラウザ検証では translate(100px, 0px) rotate(45deg) が matrix(0.707107, 0.707107, -0.707107, 0.707107, 100, 0)、rotate(45deg) translate(100px, 0px) が matrix(0.707107, 0.707107, -0.707107, 0.707107, 70.7107, 70.7107) を計算しました。2 番目に置くと移動が回転に巻き込まれます。
移動は -240〜240 px、拡大縮小は -3〜3、回転は -360〜360 度、傾斜は -89〜89 度、原点は 0〜100 % です。入力中もプレビューはこの範囲に収まり、フォーカスが外れると範囲内の数値が入力欄に書き戻されます。原点 Y の 999 は 100 %、translateX の -300 は -240 px として保存されます。
9 つの入力は step を問わないため、Tilt プリセットの 1.04 が無効扱いになることはありません。傾斜が 89 度で止まるのは tan(90 度) が無限になるためで、原点が 0〜100 % を出ないので原点マーカーがカード外へ出ることもありません。
2D 専用です。translateZ、rotateX / rotateY、perspective、matrix() の入力はなく、ステージの要素は 1 つだけです。セレクターは .transformed-element で固定され、出力は transform 宣言と任意の transform-origin のみで、メディアクエリや CSS 変数の出力はありません。
処理はすべてページ内で完結します。9 つの入力、既定以外の 3 プリセット、「CSS をコピー」、「リセット」を操作してもネットワークリクエストは 1 件も発生せず、初回表示で読み込まれるのは共通の解析タグだけです。幅 390px ではカードは 118x118（デスクトップは 150x150）で、同じ 12px の原点マーカーを使い、横スクロールは発生しません。