⤢

CSS Transform ジェネレーター

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

ファイルはこの端末に残ります

ファイルはブラウザ内で処理され、アップロードされません。ツールの実行に必要なコードと素材はダウンロードされます。アカウントも追跡もありません。

ダウンロードを使うと、このツールを1つのHTMLファイルに保存してオフラインで使えます。

translateX: 0px

translateY: 0px

rotate: 0deg

scale: 1

skewX: 0deg

結果

出力

このツールについて

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

関数はどの順番で適用されますか？

translate、次に rotate、scale、skewX の順で、出力に表示される順序と一致します。

なぜ scale はパーセントのスライダーなのですか？

スライダーは 0〜200% の範囲で、小数の係数に変換されます。そのため 100% は scale(1) を意味します。