纯 CSS 3D 透视魔法书 ：3D 物理透视书本 (Perspective Book)
来源：Spell UI — 高质量 React 组件集合，可复制粘贴到任意项目
鼠标悬停，封面翻开、书脊旋转、内页浮现——700ms 丝滑完成，没有 GSAP，没有 Three.js，全部由纯 CSS transition 驱动。
演示效果：
怎么实现的
核心思路是用 CSS 3D Transform 把一个扁平的 DOM 结构"折叠"成立体的书。整本书由 7 个 absolute 定位的 div 层叠，每层通过 translateZ 占据不同的 Z 坐标：封面 +25px、封面内侧 +24.5px、内页 +23px、书页边缘 -24px、封底 -24.5px。0.5px 的间距模拟真实纸张厚度差——封面翻开时内侧以 0.5px 延迟紧随，产生"封面比内页先动"的物理感。
外层容器设 perspective: 900px 提供透视投影，transform-style: preserve-3d 让子元素活在独立 3D 空间（没有它 Z 轴位移全部失效），初始 rotateY(-30deg) 让书微微侧身呈现立体感。
悬停时通过 Tailwind 的 group-hover: 任意值语法直接写 CSS 变换，比如封面翻开是 group-hover:[transform:translateZ(25px)_rotateY(-150deg)]，书脊偏移用 CSS 自定义属性 --spine-trans 根据尺寸动态计算。6 种交互模式（open/flip/spin/peek/lay-flat/stand）各自为封面、书脊、内页、边缘定义了独立的变换路径。
光影全部用 CSS 实现：封面左侧 8.2% 渐变模拟书脊折射光；after 伪元素叠 5 层 box-shadow 模拟环境光、暗角、高光、书脊阴影；textured 模式下用 Base64 AVIF 噪点纹理以 mix-blend-mode: hard-light 混合出布面皮革质感。
防闪烁用了一个 requestAnimationFrame 延迟——首次渲染时悬停变换类不生效，下一帧才激活，避免 hydration 瞬间 transition 把初始状态当动画导致的闪烁。动态色彩只需传入一个 HEX 值，封底自动变暗 30 色阶，书脊叠加明暗渐变，封面内侧保持中性色，全部自动推导。