🔄 CSSトランスフォーム生成

CSSトランスフォーム生成について

transform CSSプロパティは要素を回転、スケール、傾斜、移動できます。通常のドキュメントフローを壊さずに視覚フォーマットモデルの座標空間を変更します。本ジェネレーターで4つすべての2Dトランスフォームをリアルタイムコントロールで組み合わせ、即座にコピーできます。

コントロール可能なプロパティ

• 回転 —— 角度（度）で要素を回転させます。
• X/Yスケール —— 各軸に沿って要素をリサイズ。1 = 元のサイズ。
• X/Y移動 —— 各軸に沿って要素を移動します。
• X/Y傾斜 —— 角度で各軸に沿って要素を傾けます。

使い方

1. 各スライダーを調整して希望のトランスフォームを適用します。
2. 複数のトランスフォームを組み合わせます——リスト順に適用されます。
3. ドラッグ中にリアルタイムプレビューが更新されます。
4. CSSをコピーをクリックしてスタイルシートに貼り付けます。

よくある質問

トランスフォームの順序は重要ですか？ はい。rotate(45deg) scale(2) は scale(2) rotate(45deg) と同じではありません。出力は rotate → scale → translate → skew の順序で適用されます。

周囲のレイアウトに影響しますか？ いいえ。transform は視覚的レンダリングのみを変更します——要素はレイアウト内で元のスペースを占有します。

アニメーションできますか？ はい。トランスフォームをtransitionや@keyframesアニメーションでラップすると滑らかな動きになります。