CSS 3Dトランスフォームジェネレーターとは
CSS 3Dトランスフォームジェネレーターは、トランスフォーム関数を手動で入力せずに3D CSSトランスフォームを作成するビジュアルツールです。rotateX()、rotateY()、translateZ()、perspective()などの関数を使用。
クイックアンサー
rotateX、rotateY、rotateZ、scale、translate3d、perspective、transform-originを調整してCSS 3Dトランスフォームを視覚的に作成。正しい順序で結合された完全なCSS transformプロパティをコピー。
Last updated: 2026-06-11
制限事項
- このツールは単一要素の3Dトランスフォームを生成。
- プレビューは静的2Dカード要素を使用。
- 3DトランスフォームはSafariでborder-radiusと組み合わせるとアーティファクトを引き起こす可能性。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- rotateX、rotateY、rotateZスライダーを調整してプレビューカードを3D空間で傾ける。
- パースペクティブ値を設定。小さい値（200-400px）は強い3D効果、大きい値（800-2000px）は微妙な奥行き。
- translateX、translateY、translateZを調整して要素を再配置。
- 必要に応じて要素をスケールし、transform-originポイントを設定。
- Preserve 3DをオンにしてCSS出力をスタイルシートにコピー。
主な用途
- マウス位置に基づくrotateXとrotateYでカードホバー時の微妙な傾き効果を作成。
- rotateYとCSSトランジションを組み合わせた価格カードの3Dフリップアニメーションを構築。
- translateZを使用した奥行きレイヤリングでヒーローセクションをデザイン。