# CSS変形とトランジションを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： CSS変形とトランジションを理解し、滑らかで魅力的なインタラクティブUIを作成できるようになる ## 説明してほしい内容： ### 1. CSS変形（Transform）の基本 - **transform**プロパティの概念と重要性 - **2D変形**と**3D変形**の違い - **変形の原点**（transform-origin）の理解 - **複数の変形**の組み合わせ方法 ### 2. 2D変形関数の詳細 - **translate()**：要素の移動 - **rotate()**：要素の回転 - **scale()**：要素の拡大・縮小 - **skew()**：要素の傾斜 - **matrix()**：行列による変形 - **個別関数**（translateX, rotateZ等）の活用 ### 3. 3D変形の活用 - **translate3d()**：3D空間での移動 - **rotate3d()**：3D回転 - **scale3d()**：3D拡大・縮小 - **perspective**：遠近感の設定 - **transform-style**：3D変形の継承 ### 4. トランジション（Transition）の仕組み - **transition**プロパティの基本概念 - **アニメーション可能なプロパティ**の理解 - **パフォーマンス**への影響と最適化 - **ハードウェアアクセラレーション**の活用 ### 5. トランジションプロパティの詳細 - **transition-property**：対象プロパティの指定 - **transition-duration**：アニメーション時間 - **transition-timing-function**：イージング関数 - **transition-delay**：遅延時間の設定 - **transitionショートハンド**の効率的な使用 ### 6. 実践的なUIエフェクト - **ホバーエフェクト**：ボタンやカードの変化 - **クリックエフェクト**：フィードバック効果 - **ローディング効果**：回転アニメーション - **画像ズーム**：ギャラリー効果 - **メニューアニメーション**：ナビゲーション効果 ### 7. 高度なテクニック - **cubic-bezier()**：カスタムイージング - **steps()**：段階的なアニメーション - **複数プロパティ**の同時アニメーション - **チェーンアニメーション**の実装 - **レスポンシブ対応**の考慮点 ## 回答形式： - 各変形・トランジションごとにコード例を提示 - 視覚的な動きを説明文で詳しく解説 - 実際に試せる完全なUIコンポーネント例 - パフォーマンス最適化のベストプラクティスを含める