CSS transform生成ツール｜移動・回転・拡大縮小・傾斜をプレビュー

このツールでできること

X・Y方向の移動、回転、拡大縮小、傾斜を組み合わせ、プレビューを確認しながらCSSのtransformプロパティを生成できます。

使い方

1. 移動、回転、拡大縮小、傾斜の値を入力するかスライダーで調整します。
2. プレビューで変形を確認します。
3. 「CSSを生成」を押します。
4. 「CSSコードをコピー」を押して使用するCSSへ貼り付けます。

入力例・出力例

X方向の移動を10px、回転を45deg、X・Y倍率を1、そのほかを0にすると、次のCSSを生成します。

transform: translate(10px, 0px) rotate(45deg) scale(1, 1) skew(0deg, 0deg);

X倍率を-1にすると水平方向へ反転し、0にするとX方向の大きさがなくなります。

よくある利用場面

• 要素の移動・回転・拡大縮小・傾斜を組み合わせるとき
• 変形結果をプレビューしてからCSSへ貼り付けるとき
• 関数順序を固定した1行のtransformプロパティを作るとき

処理仕様

• X・Y方向の移動は-1000〜1000px、回転は-360〜360deg、X・Y倍率は-5〜5、X・Y方向の傾斜は-89〜89degの範囲です。
• 半角数字の整数または小数点以下4桁までの小数を入力できます。単位付き入力、指数表記、カンマ、全角数字には対応していません。
• translate、rotate、scale、skewの順で固定し、初期値や0の関数も省略せず1行のCSSを生成します。CSS transformは関数の並び順によって結果が変わります。
• 数値入力とスライダーは同期し、小数点以下4桁までの値を保持します。有効な入力変更はプレビューへ即時反映し、以前の生成結果とコピー可否を無効にします。不正な入力中は最後の正常なプレビューを保持します。
• 倍率に負数を指定するとその方向へ反転し、0を指定するとその方向の大きさがなくなります。出力時は負の0を0にします。

入力データについて

入力値、プレビュー、CSS生成はブラウザ内だけで処理され、ToolRollのサーバーや外部サービスへ送信されません。外部ライブラリを読み込まず、Cookie、Web Storage、IndexedDBへ保存する処理もありません。「CSSコードをコピー」を押したときだけ、生成したCSSを端末のクリップボードへ書き込みます。