CSS transformジェネレーター

平行移動・回転・拡大縮小・傾斜に加え、3Dの奥行きや軸回転にも対応したCSS transform値を、変形の原点の指定とライブプレビュー付きで生成します。

プリセット

2D 変形

X 移動px

Y 移動px

回転deg

X 拡大縮小

Y 拡大縮小

X 傾斜deg

Y 傾斜deg

3D 変形

パースペクティブpx

X 軸回転（傾き）deg

Y 軸回転（向き）deg

Z 移動（奥行き）px

0 はパースペクティブなし。パースペクティブがないと 3D 回転は平らに見えます。

変形の基準点

X 位置%

Y 位置%

プレビュー

点線は変形前の要素、赤い点は変形の基準点（transform-origin）です。

CSS コード

transform: none;

CSS transformジェネレーターとは？

CSSのtransform関数を、スライダーで組み合わせます。2Dのtranslate、rotate、scale、skewと、3Dのperspective、rotateX、rotateY、translateZに対応しています。プレビューの破線の枠は元の位置を示し、赤い点は変形の基準点を示します。

CSS transformジェネレーターの使い方

プリセット（3D 傾き、反転、斜め、ズーム、3D カード）を選ぶか、なしから始めます。
2D 変形で、X 移動 / Y 移動、回転、X 拡大縮小 / Y 拡大縮小、X 傾斜 / Y 傾斜を調整します。
3D 変形で、パースペクティブ、X 軸回転（傾き）、Y 軸回転（向き）、Z 移動（奥行き）を設定します。
変形の基準点を、リストから選ぶか、X 位置 / Y 位置で設定します。
CSSコードをコピーします。

例

入力

Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5

出力

transform: translate(20px, 0) rotate(45deg) scale(1.5);

CSS transformジェネレーターを使うべき場面

ホバー効果、カードのフリップ、傾けた3Dのショーケース、正確な位置のオフセットに使います。transformはレイアウトに影響しません（周囲の要素は動きません）。レイアウトを変えるには、margin、flexbox、gridを使ってください。CSS Animation Generatorと組み合わせると、transform間をアニメーションできます。

CSS transformジェネレーターの仕組み

関数は、中立でない場合にのみ、perspective()、translate()、translateZ()、rotateX()、rotateY()、rotate()、scale()、skew() の順で書かれます。変形は要素を基準に右から左へ適用されるため、順序で結果が変わります。perspective()は、その後ろにある3D関数に影響させるため、先頭に置く必要があります。X/Yの拡大縮小が等しい場合は、1つの scale(n) として書かれます。transform-origin は、既定の中央（50% 50%）と異なる場合にのみ出力されます。