CSS transformジェネレーター
移動・回転・拡大縮小・傾き・3D回転・奥行き（perspective）・変形の基準点を調整すると、プレビューと生成されるCSSがリアルタイムに更新されます。初期値のままの項目は出力から省略されるので、必要な変形だけのすっきりしたCSSが得られます。「3Dカードの傾き」「フリップ（裏返し）」などのプリセットから始めることもできます。アニメーションにする場合は CSSアニメーションジェネレーター もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プリセット
プレビュー
変形の設定
使い方
- 「プリセット」から近い形を選ぶか、そのまま各スライダーを動かします。
- 「移動」「回転」「拡大縮小」「傾き」などの数値を調整し、プレビューで確認します。
- 3Dの奥行きを出したいときは「perspective」を設定し、X軸・Y軸の回転を加えます。
- 「コピー」で生成されたCSSをコピーし、スタイルシートに貼り付けます。やり直すときは「リセット」を押します。
注意事項
- 出力は`perspective()`関数を`transform`の先頭に置く書き方です。親要素に`perspective`プロパティを指定する方式とは、複数の子要素を並べた際の見え方が異なります。
- `transform`の関数は左から順に適用されるため、順番を入れ替えると結果が変わります。このツールは移動 → 回転 → 拡大縮小 → 傾きの順で出力します。
- `transform-origin`が初期値（50% 50%）の場合は出力を省略します。
- 傾き（skew）は±89度までです。90度付近では要素が極端に伸びて見えなくなります。
- `transform`は要素の周囲のレイアウトには影響せず、見た目だけが変わります。
用語解説
transform
要素を移動・回転・拡大縮小・傾けるCSSプロパティ。複数の変形関数をスペース区切りで並べると、左から順に適用される。
perspective
3D変形で奥行きの強さを決める値。小さいほど遠近感が強く、大きいほど平面に近い見た目になる。
transform-origin
回転や拡大縮小の基準になる点。初期値は要素の中心（50% 50%）で、左上にすると左上を軸に回転する。
よくある質問
transformの関数は順番で結果が変わりますか？
変わります。関数は左から順に適用されるため、「移動してから回転」と「回転してから移動」では位置が異なります。このツールは移動 → 回転 → 拡大縮小 → 傾きの順で出力します。別の順にしたい場合は、コピーしたCSSの関数を並べ替えてください。
3Dの奥行きが出ません。どうすればよいですか？
X軸またはY軸の回転だけでは平面的に見えます。「perspective」に600〜1000程度を入れると奥行きが出ます。小さい値ほど遠近感が強くなります。
perspective()関数と親要素のperspectiveプロパティの違いは？
このツールは`transform`の先頭に`perspective()`を置く方式で出力します。要素単体の変形には十分ですが、複数の子要素に共通の消失点を与えたい場合は、親要素に`perspective`プロパティを指定する方式を使ってください。
transform-originを変えると何が変わりますか？
回転や拡大縮小の中心点が変わります。初期値は中心（50% 50%）で、0% 0%にすると左上を軸に回転します。初期値のままなら出力から省略されます。
skewの角度を90度にできないのはなぜですか？
90度付近では要素が無限に伸びて表示できなくなるため、±89度までに制限しています。
このページをシェア