CSS トランスフォーム ジェネレーター

2D変換はX軸とY軸のみで動作し、幅と高さの寸法に影響します。これらには、回転、スケール、スキュー、移動が含まれます。3D変換はZ軸を奥行きのために追加し、要素が3次元空間で回転しているように見せることができます。rotateXおよびrotateYのようなプロパティは、要素をビューアに近づけたり遠ざけたりするように傾けます。3D変換は、奥行きを作成するために親または要素に遠近法値を必要とします。遠近法がないと、3D回転は平坦に見えます。2Dと3Dの両方の変換は、単一の変換プロパティで組み合わせることができます。

変換元は、変換が適用されるポイントを設定します。デフォルトでは、要素の中央 (50% 50%) です。これを左上 (0% 0%) に変更すると、回転が中央ではなく角からピボットします。これは、回転、スケール、スキューの外観を劇的に変更します。たとえば、中央から45度回転すると要素はその場で回転しますが、左上から回転するとドアのようにスイングします。元は、キーワード (上、中央、下、左、右)、パーセンテージ、または正確な制御のためのピクセル値を受け入れます。

遠近法は、ビューアとZ平面の間の距離を定義し、3D変換の奥行きの錯覚を作成します。200pxのような小さい値は、3D効果が劇的で歪んで見える極端なクローズアップ遠近法を作成します。2000pxのような大きい値は、微妙で遠い遠近法を作成します。遠近法は、親要素にプロパティとして (perspective: 800px) または要素自体に変換関数として (transform: perspective(800px)) 設定できます。複数の子要素が同じ3D空間を共有する場合、親方法が推奨されます。

2026年現在、CSS変換のベンダープレフィックスはほとんど必要ありません。プレフィックスのないtransformプロパティは、Chrome、Firefox、Safari、Edge、およびモバイルブラウザを含むすべての最新ブラウザでサポートされています。-webkit-transformプレフィックスは、Safari 9 (2015) より前の古いSafariおよびiOSバージョンに必要でした。非常に古いブラウザをサポートする必要がある場合は、このジェネレータは出力にコメントとしてベンダープレフィックスを含めることができます。現在のブラウザを対象とするほとんどのプロジェクトでは、プレフィックスのないバージョンで十分であり、プレフィックスなしではコードがよりクリーンになります。