CSS Transformジェネレーター - 回転、拡大縮小、傾斜、移動をオンラインで無料作成

回転、拡大縮小、傾斜、移動を含むCSS transformプロパティをライブプレビューでビジュアルに生成

CSSツール

Tool

Rotate (0deg)Scale X (1)Scale Y (1)Skew X (0deg)Skew Y (0deg)Translate X (0px)Translate Y (0px)

CSS

transform: none;

使い方

CSS transformプロパティは、周囲のドキュメントレイアウトに影響を与えることなく、要素を2Dまたは3D空間で回転、拡大縮小、傾斜、移動させることができます。

はい。CSS transformはスペースで区切られた関数のリストを受け入れます（例：transform: rotate(45deg) scaleX(1.2) translateX(50px)）。ジェネレーターはコードをきれいに保つためにデフォルト以外の値のみを出力します。

いいえ。marginやpositionの変更とは異なり、transformは周囲の要素のレイアウトに影響しません。要素は視覚的に移動しますが、元のスペースはドキュメントフロー内で確保されたままです。

回転と傾斜は度（deg）を、移動はピクセル（px）を、拡大縮小は無単位（元のサイズの倍率）を使用します。

使い方

1スライダーを使用して回転、scaleX/Y、skewX/Y、translateX/Yの値を調整します

2ライブプレビューがリアルタイムで更新されるのを確認します

3ゴーストアウトラインが参照として元の位置を表示します

4生成されたCSS transformコードをコピーしてスタイルシートに貼り付けます

よくある質問

回転と傾斜は度（deg）を、移動はピクセル（px）を、拡大縮小は無単位（元のサイズの倍率）を使用します。