a11y.skipToMainContent
1

CSS変換ジェネレータ

CSS をスライダで変換します。 — トランスレート、スケール、回転、スキュー、フル 3D を変換し、トランスフォームプロパティをコピーします.

2D transforms

px
px
deg
deg
deg

3D transforms

px
deg
deg
deg
px

Preview

BOX

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Transform Generator

  1. トランスレート、スケール、回転、スキュー用の2Dスライダを調整します.
  2. Pivotポイントを変更するには、transform-originを選択します.
  3. 3Dセクションを開き、回転X/Y/Z、translateZ、親の視点を設定します.
  4. 変換宣言をつかむためにCSSをコピーするをクリックします.

CSS変換ジェネレータとは?

CSS Transform Generator は transform プロパティを視覚的に構築します。 translateX/Y、scaleX/Y、およびskewX/Y の 2D スライダーを使用して、transform-origin をセットし、3D セクションに、rotX、rotY、rotZ、translateZ、親 perspective

をドロップします。 ラベル付きの要素を持つグリッド化されたプレビューボックスは、結果がリアルタイムで表示されているため、各関数のスタックを正確に確認できます。 CSS で機能する関数の順序、生成された宣言は、sensible 、予測可能な順序を保持します。

ブラウザですべて実行されます。 結果の transform 行をコピーします。 transform-origin と perspective のルールをコピーし、スタイルシートに貼り付けます。

Advertisement

FAQ

なぜ変換関数の順序は問題ですか?
CSS は、左から右にトランスフォーメーション関数を変換するので、回転してからトランスレートすると異なる結果が得られます。 ジェネレータは一貫した順番で出力されます。特定のシーケンスが必要な場合は、CSSを調整します.
親の視点と箱ではなく、なぜですか?
3D回転が正しいように見えるため、通常は親(変換ボックスを含む要素)に視点が置かれます。 このツールはプレビューステージに適用され、生成されたCSSコメントでこれをメモします.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Transform Generator on Wikipedia·Developer Tools on Wikipedia·CSS Transform Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement