CSSトランスフォーム生成ツール
オンラインで利用できるCSSトランスフォーム生成ツール。インストール不要。ビジュアルなトランスフォームプロパティエディター
CSS Transform について
translate（X/Y/Z）、scale（X/Y）、rotate（Z/X/Y）、skew（X/Y）用のスライダーに加え、編集可能な transform-origin と調整可能なプレビューボックスサイズを用意し、transform 宣言をインタラクティブに組み立てます。生成される CSS では、移動には translate3d を使用し、scale/rotate/rotateX/rotateY/skew は変更された場合のみ結合して出力し、transform-origin と共に出力されます。
使い方
1. Translate、Scale、Rotate、Skew の下にあるスライダーをドラッグして transform を組み立てます。各値には数値入力欄もあり、精度の高い入力が可能です。 2. プレビューの Box Size（50–250px）を調整し、Transform-Origin（任意の CSS origin 文字列、既定値 50% 50%）を編集します。 3. Reset をクリックすると、すべての値がニュートラルな既定値に戻ります。 4. Copy をクリックすると、transform: ... と transform-origin: ... の両方の宣言がコピーされます。
Transform 関数と値の範囲
translateX/Y/Z：-200 〜 200 px、いずれかが非ゼロの場合は translate3d(x, y, z) としてまとめて出力されます。scaleX/Y：0.1 〜 3、いずれかが 1 でなければ scale(x, y) として出力されます。rotate (Z)：-360 〜 360deg。rotateX/Y：-180 〜 180deg。skewX/Y：-60 〜 60deg、いずれかが非ゼロの場合は skew(x, y) として出力されます。どの関数も変更されていない場合、出力は transform: none になります。
▶回転が 3D として表示されるのに、要素が平らに見えるのはなぜですか？
▶出力に transform-origin は含まれますか？
▶スライダーをドラッグせずに正確な値を入力できますか？
▶1 つの軸しか動かしていないのに、なぜ translate3d が出力されるのですか？
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。