CSS Transformジェネレーター

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

CSS Transformジェネレーターでは、要素の移動・回転・拡大縮小・傾きなどを、プレビューで確認しながら調整できます。

2D Transformだけでなく、3D Transformやperspectiveにも対応しています。

1. 2D / 3Dを選択する

プレビュー上部の「2D」「3D」から、作成したいtransformの種類を選択します。

2Dモードでは、以下を調整できます。

• translate
• rotate
• scale
• skew
• transform-origin

3Dモードでは、X・Y・Z軸を使ったtransformに加えて、perspectiveの調整ができます。

2. transformの値を調整する

各項目のスライダーまたは数値入力から値を変更します。

変更内容はリアルタイムでプレビューと生成コードに反映されます。

2Dモードでは、

• 横・縦方向への移動
• 回転
• 拡大・縮小
• 傾き

を調整できます。

3DモードではX・Y・Z軸を指定して、立体的な移動や回転を設定できます。

3. transform-originを設定する

transform-originでは、回転や拡大縮小などの変形の基準点を指定できます。

9つのポイントから選択するか、X・Yの値を直接入力して細かく調整できます。

3DモードではZ方向の基準位置も指定できます。

プレビュー内の赤いポイントで、現在のtransform-originを確認できます。

4. transformの適用順を調整する

複数のtransformが設定されている場合は、「transformの適用順」から順番を変更できます。

CSS Transformは、同じ値を使用していても関数の並び順によって表示結果が変わります。

例えば、

transform: translate(50px, 0) rotate(45deg);

と、

transform: rotate(45deg) translate(50px, 0);

では、最終的な位置が異なります。

ジェネレーターでは項目をドラッグ＆ドロップして順番を変更し、その違いをプレビューで確認できます。

5. 3Dモードではperspectiveを調整する

3Dモードでは、perspectiveを使って遠近感を調整できます。

perspectiveをONにすると、距離の値を指定できます。

値を小さくすると視点が近づき、奥行きによる見え方の差が強調されます。値を大きくすると視点が遠ざかり、より平面的に見えます。

また、perspective-originを変更すると、3D空間をどの位置から見るかを調整できます。

6. 平面・立方体プレビューを切り替える

3Dモードでは、プレビューを

• 平面
• 立方体

から切り替えられます。

通常のHTML要素に近い状態で確認したい場合は「平面」、X・Y・Z軸の変化を立体的に確認したい場合は「立方体」が便利です。

※立方体は、3D Transformの変化を確認しやすくするためのプレビュー表示です。立方体自体を作るCSSは、生成コードには含まれません。

7. プレビュー要素のサイズを調整する

「詳細設定」では、プレビュー要素の

• width
• height
• border-radius

を変更できます。

transformそのものには影響せず、確認しやすい形にプレビュー要素を調整するための設定です。

8. 生成されたCSSをコピーする

調整が完了したら、「コピーする」ボタンから生成されたCSSをコピーできます。

使用していないtransformはコードから省略されるため、必要な設定だけをコピーできます。

CSS transformとは？

transformは、HTML要素に移動・回転・拡大縮小・傾斜をはじめとする、2次元または3次元の変形を加えるためのCSSプロパティです。

例えば、

transform: translate(50px, 0) rotate(30deg);

と指定すると、要素を右方向へ移動しながら回転できます。

transformによる変形は、通常のレイアウト上で確保されている領域を直接変更せず、要素の見た目を変化させます。

そのため、

• ホバーエフェクト
• アニメーション
• カードや画像の回転
• UIパーツの拡大・縮小
• 装飾要素の位置調整

など、さまざまな場面で利用できます。

2D Transformで使用できる主な関数

translate()

translate()は、要素を現在の位置から移動させるための関数です。

transform: translate(50px, 20px);

1つ目の値がX方向、2つ目がY方向です。

正の値では右・下方向、負の値では左・上方向へ移動します。

rotate()

rotate()は要素を回転させます。

transform: rotate(30deg);

正の値では時計回り、負の値では反時計回りに回転します。

回転の基準位置はtransform-originで変更できます。

scale()

scale()は要素を拡大・縮小します。

transform: scale(1.2, 0.8);

1が元の大きさです。

例えば、

• 1.2 → 1.2倍
• 0.8 → 0.8倍

となります。

XとYを別々に指定することで、横方向と縦方向の倍率を個別に調整できます。

skew()

skew()は要素を斜めに傾けます。

transform: skew(15deg, 5deg);

X方向とY方向の傾きをそれぞれ設定できます。

3D Transformとは？

3D Transformでは、通常のX・Y軸に加えて、奥行きを表すZ軸を利用できます。

例えば、

transform: translate3d(50px, 0, 100px)
  rotateX(30deg)
  rotateY(45deg);

のように指定すると、要素を3D空間上で移動・回転できます。

このジェネレーターでは、3Dモードに切り替えることで、X・Y・Zそれぞれの値を調整できます。

3D Transformで使用できる主な関数

translate3d()

translate3d()はX・Y・Zの3方向へ要素を移動します。

transform: translate3d(50px, 0, 100px);

Zの値を大きくすると、perspectiveが設定されている場合は手前へ近づいて見えます。

rotateX() / rotateY() / rotateZ()

3D Transformでは、各軸を中心に要素を回転できます。

transform:
  rotateX(30deg)
  rotateY(45deg)
  rotateZ(10deg);

• rotateX()：X軸を中心に回転
• rotateY()：Y軸を中心に回転
• rotateZ()：Z軸を中心に回転

平面プレビューと立方体プレビューを切り替えると、それぞれの違いを確認しやすくなります。

scale3d()

scale3d()はX・Y・Z方向の拡大・縮小率を指定します。

transform: scale3d(1.2, 1, 1);

X・Y方向は平面要素でも変化を確認できます。

Z方向のScaleは単一の平面要素では見た目の変化が分かりにくいため、立体的な構造を持つ要素で利用した場合に効果を確認しやすくなります。

transformの適用順について

CSS transformでは、関数を記述する順番が重要です。

例えば、

transform: translate(100px, 0) rotate(45deg);

と、

transform: rotate(45deg) translate(100px, 0);

では、同じTranslateとRotateを使用していても表示結果が異なります。

3D Transformでも同様に、

transform: translate3d(50px, 0, 100px) rotateY(45deg);

と、

transform: rotateY(45deg) translate3d(50px, 0, 100px);

では結果が変わります。

複数のtransformを組み合わせる場合は、このジェネレーターの「transformの適用順」を変更しながら確認すると分かりやすくなります。

perspectiveとは？

perspectiveは、3D Transformに遠近感を加えるためのCSSプロパティです。

.parent {
  perspective: 800px;
}

値は視点からz=0の平面までの距離を表します。値が小さいほど視点が近くなり、奥行きによる大きさや位置の変化が強調されます。値が大きいほど視点が遠くなり、平面的に見えます。

perspectiveは通常、transformを適用する要素そのものではなく、その親要素に指定します。

そのため、このジェネレーターでも生成コードではperspective用の設定とtransform用の設定を分けて表示します。

perspective-originとは？

perspective-originは、3D空間をどの位置から見ているかを指定するプロパティです。

初期値は中央の、

perspective-origin: 50% 50%;

です。

例えば、

perspective-origin: 0% 50%;

とすると、左側寄りの位置から3D空間を見ているような表示になります。

perspective-originはperspectiveと組み合わせて使用します。

FAQ