UTILS.
100% ブラウザ内で完結

CSS Transform ジェネレーター

translate、rotate、scale、skew を1つの CSS transform に組み合わせ、ライブプレビューで確認できます。

このツールについて

スライダーを動かして translate、rotate、scale、skewX を組み合わせ、ボックスをプレビューして transform をコピーできます。すべてブラウザ内で完結します。

よくある質問

関数はどの順番で適用されますか?
translate、次に rotate、scale、skewX の順で、出力に表示される順序と一致します。
なぜ scale はパーセントのスライダーなのですか?
スライダーは 0〜200% の範囲で、小数の係数に変換されます。そのため 100% は scale(1) を意味します。

その他のツール