mindmap
    id1[CSS 变换基础]
        id1-1[变换概述]
            id1-1-1[变换的基本概念]
            id1-1-2[变换坐标系]
            id1-1-3[变换的渲染原理]
        id1-2[D 变换]
            id1-2-1[translate   平移变换]
            id1-2-2[rotate   旋转变换]
            id1-2-3[scale   缩放变换]
            id1-2-4[skew   倾斜变换]
            id1-2-5[matrix   矩阵变换]
        id1-3[D 变换]
            id1-3-1[D 变换坐标系]
            id1-3-2[translate3d   3D 平移]
            id1-3-3[rotate3d   3D 旋转]
            id1-3-4[scale3d   3D 缩放]
            id1-3-5[perspective   透视变换]

mindmap
    id2[CSS 变换属性详解]
        id2-1[transform 属性]
            id2-1-1[单一变换函数]
            id2-1-2[多重变换组合]
            id2-1-3[变换原点设置]
        id2-2[transform-origin 属性]
            id2-2-1[D 变换原点]
            id2-2-2[D 变换原点]
            id2-2-3[百分比和关键字值]
        id2-3[transform-style 属性]
            id2-3-1[flat 模式]
            id2-3-2[preserve-3d 模式]
        id2-4[perspective 属性]
            id2-4-1[透视距离设置]
            id2-4-2[透视原点]
        id2-5[backface-visibility 属性]
            id2-5-1[visible 可见]
            id2-5-2[hidden 隐藏]

mindmap
    id3[CSS 过渡基础]
        id3-1[过渡概述]
            id3-1-1[过渡的基本概念]
            id3-1-2[过渡的工作机制]
            id3-1-3[过渡的应用场景]
        id3-2[过渡属性]
            id3-2-1[transition-property]
            id3-2-2[transition-duration]
            id3-2-3[transition-timing-function]
            id3-2-4[transition-delay]
        id3-3[过渡函数]
            id3-3-1[线性函数]
            id3-3-2[缓动函数]
            id3-3-3[贝塞尔曲线]
            id3-3-4[步进函数]

mindmap
    id4[过渡属性详解]
        id4-1[transition-property]
            id4-1-1[单个属性过渡]
            id4-1-2[多个属性过渡]
            id4-1-3[all 关键字]
        id4-2[transition-duration]
            id4-2-1[时间单位]
            id4-2-2[多个持续时间]
            id4-2-3[零持续时间]
        id4-3[transition-timing-function]
            id4-3-1[预定义函数]
            id4-3-2[自定义贝塞尔曲线]
            id4-3-3[步进函数详解]
        id4-4[transition-delay]
            id4-4-1[延迟时间设置]
            id4-4-2[负延迟效果]
            id4-4-3[多个延迟时间]

mindmap
    id5[变换与过渡的实战应用]
        id5-1[D 变换动画]
            id5-1-1[平移动画]
            id5-1-2[旋转动画]
            id5-1-3[缩放动画]
            id5-1-4[组合变换动画]
        id5-2[D 变换动画]
            id5-2-1[D 翻转效果]
            id5-2-2[D 旋转立方体]
            id5-2-3[D 卡片效果]
        id5-3[过渡效果优化]
            id5-3-1[性能优化技巧]
            id5-3-2[硬件加速]
            id5-3-3[回流与重绘优化]

mindmap
    id6[高级技巧与最佳实践]
        id6-1[变换与过渡的组合]
            id6-1-1[复杂动画序列]
            id6-1-2[状态切换动画]
            id6-1-3[响应式动画设计]
        id6-2[性能优化]
            id6-2-1[变换层创建]
            id6-2-2[will-change 属性]
            id6-2-3[动画帧率优化]
        id6-3[浏览器兼容性]
            id6-3-1[前缀使用]
            id6-3-2[降级方案]
            id6-3-3[特性检测]

mindmap
    id7[实际案例分析]
        id7-1[导航菜单动画]
            id7-1-1[下拉菜单]
            id7-1-2[侧边栏菜单]
            id7-1-3[汉堡菜单]
        id7-2[图片展示效果]
            id7-2-1[图片轮播]
            id7-2-2[图片放大镜]
            id7-2-3[图片画廊]
        id7-3[交互反馈动画]
            id7-3-1[按钮点击效果]
            id7-3-2[表单验证动画]
            id7-3-3[加载状态动画]

mindmap
    id8[与其他动画技术结合]
        id8-1[与 CSS 动画结合]
            id8-1-1[@keyframes 规则]
            id8-1-2[animation 属性]
            id8-1-3[变换与关键帧动画]
        id8-2[与 JavaScript 结合]
            id8-2-1[事件驱动动画]
            id8-2-2[动态属性修改]
            id8-2-3[动画库集成]
        id8-3[与现代框架结合]
            id8-3-1[React 中的变换]
            id8-3-2[Vue 过渡系统]
            id8-3-3[Angular 动画模块]