H5开发提示词：纯CSS3+JS实现带光线追踪质感的3D卡片翻转交互
提示词描述：
适用场景：产品营销H5、电商落地页、品牌官网展示。目标用户：前端开发工程师、交互设计师。预期效果：获得一个零依赖、高性能的3D卡片交互组件，包含桌面端与移动端的完美适配方案，显著提升产品的线上展示质感与转化率。
提示语关键词：
AI写代码,H5开发,CSS3 3D动画,前端交互,营销落地页代码,Three.js替代
提示词内容：
你是一位精通前端动效与创意交互的资深开发工程师，擅长使用现代Web技术打造令人惊叹的营销H5页面。请帮我编写一个极具视觉冲击力的3D产品卡片翻转展示组件。该组件将用于高端电子产品的营销落地页，需要展现出极致的细节和流畅的交互体验。
请使用原生HTML、CSS3和JavaScript实现，不依赖任何重型第三方库，以确保极致的加载性能。卡片需要包含正面（产品展示图与核心卖点）和背面（详细参数与购买按钮）。在CSS层面，请利用transform-style: preserve-3d和perspective构建真实的3D空间，确保翻转动画具有正确的深度感和透视效果。
在交互设计上，请实现两个层级的动效。第一层级是鼠标悬停时的3D倾斜跟随效果：通过监听鼠标在卡片区域内的移动坐标，利用rotateX和rotateY让卡片产生轻微的3D倾斜，并配合高光层（伪元素）的移动，模拟出光线照射在玻璃或金属材质上的反射效果。第二层级是点击卡片后的平滑翻转动画：使用贝塞尔曲线（cubic-bezier）自定义动画时间函数，实现带有物理弹性阻尼的翻转效果，翻转过程需流畅自然，无卡顿感。
请提供完整的代码结构，包括语义化的HTML标签、模块化的CSS样式（使用CSS变量管理主题色、阴影、过渡时间等）以及面向对象的JavaScript交互逻辑。在JS部分，请使用requestAnimationFrame来处理悬停倾斜的平滑过渡，避免直接使用CSS transition导致的延迟和生硬感。
最后，请详细说明在移动端（触摸设备）上如何适配这些交互效果，如何处理移动端缺乏鼠标悬停状态的问题，并提供相应的触摸事件监听和手势识别代码逻辑，确保H5在各种设备上都能提供一致的高级体验。