CSSツール/CSS変換ジェネレーター
CSS変換ジェネレーター
移動、回転、拡大縮小、傾斜コントロールでCSSトランスフォームを視覚的に作成
変換コントロール
移動
0px
0px
回転
0°
拡大縮小
1.0
1.0
1.0
傾斜
0°
0°
プリセット
プレビュー
要素
破線の境界線は元の位置を示します
CSSコード
css
Loading...CSS変換ガイド
CSSトランスフォームと視覚効果の作成方法を学ぶ
CSS Transformとは？
CSSトランスフォームを使用すると、要素を移動（translate）、回転（rotate）、拡大縮小（scale）、傾斜（skew）することで視覚的な表示を変更できます。トランスフォームはドキュメントフローに影響しません - 変換された要素が視覚的に移動する間、他の要素はそのままの位置に留まります。
トランスフォーム関数
- translate(): 要素を水平および垂直に移動
- rotate(): 中心点を軸に要素を回転
- scale(): 要素のサイズを拡大または縮小
- skew(): X軸とY軸に沿って要素を傾斜
使用方法
- 移動コントロールを使用して要素を移動
- 回転を調整して要素を回転
- 拡大縮小で要素のサイズを変更
- 3Dモードを有効にして遠近法トランスフォームを適用
ヒント
- 複数のトランスフォームを組み合わせて複雑な効果を作成
- transform-originを使用してピボットポイントを変更
- 3Dトランスフォームには親要素にperspectiveが必要
よくある質問
translateとpositionの違いは何ですか？
translateはドキュメントフローに影響せずに要素を視覚的に移動します - 他の要素はそのままの位置に留まります。position（relative、absolute）はレイアウトと兄弟要素に影響を与える可能性があります。translateはGPUアクセラレーションも適用されるため、アニメーションに適しています。
transform originを変更するにはどうすればよいですか？
transform-originプロパティを使用してピボットポイントを設定します。デフォルトは'center center'です。キーワード（top、left、center、right、bottom）、パーセンテージ、またはピクセル値を使用できます。例えば、'transform-origin: top left'は左上隅から回転します。
3Dトランスフォームが機能しないのはなぜですか？
3Dトランスフォームには深度を表示するためにperspectiveが必要です。親要素に'perspective: 1000px'を追加してください。また、ネストした3Dトランスフォームがある場合は'transform-style: preserve-3d'が設定されていることを確認してください。perspective値は3D効果の強さを制御します。
トランスフォームをアニメーション化できますか？
はい、トランスフォームはアニメーションに最適です。transformプロパティでCSSトランジションまたはキーフレームアニメーションを使用できます。トランスフォームはハードウェアアクセラレーションされているため、滑らかな60fpsアニメーションが得られます。最高のパフォーマンスのために'will-change: transform'と組み合わせてください。
トランスフォームはどの順序で適用されますか？
トランスフォームは右から左に適用されます。'transform: rotate(45deg) translate(100px)'は、まず移動してから回転します。各トランスフォームは後続のトランスフォームに影響するため、順序が重要です。移動してから回転するには、'transform: translate(100px) rotate(45deg)'を使用します。