免费在线CSS 3D倾斜卡片生成器，实时预览鼠标跟随的3D倾斜效果。支持调节透视距离、倾斜角度、眩光(glare)、聚光灯(spotlight)效果，一键复制HTML+CSS+JS代码到你的项目。纯前端零依赖，免费无需注册。
零依赖 · 实时预览 · 一键复制⚙️ 参数设置
👁️ 实时预览 （鼠标移入卡片查看效果）
📝 生成代码
📦 关于 CSS 3D 倾斜卡片效果
CSS 3D倾斜卡片（Tilt Card）是一种流行的UI交互效果，当鼠标悬停在卡片上时，卡片会根据鼠标位置进行3D倾斜，营造出立体的悬浮感。这种效果广泛应用于产品展示、特色卡片、游戏卡片等场景。
核心原理：通过监听 mousemove 事件计算鼠标相对于卡片中心的位置，将其转换为 rotateX 和 rotateY 角度，配合 CSS perspective 实现3D透视效果。
眩光效果(Glare)：在卡片上叠加一层径向渐变，模拟光线反射，增强立体感。
聚光灯效果(Spotlight)：跟随鼠标的高光圆圈，让卡片看起来像被聚光灯照射。
内容视差(Parallax)：卡片内容通过 translateZ 在Z轴上偏移，产生前后层次的视差感。
❓ 常见问题
CSS 3D倾斜效果会影响性能吗？
合理使用下性能影响很小。关键优化点：1) 使用 will-change: transform 提示浏览器启用GPU加速；2) 避免同时倾斜过多卡片；3) 使用 transform 而非 top/left/left 等属性；4) 移动端可考虑禁用效果。
移动端如何处理？
移动端没有 mousemove 事件，可以结合 deviceorientation（陀螺仪）API实现基于设备倾斜的效果，或者直接禁用3D效果只保留静态卡片。建议使用 @media(hover:hover) 媒体查询仅在支持hover的设备上启用。
perspective 值设多少合适？
perspective 值越小，3D透视效果越强烈（类似广角镜头）；值越大，效果越微妙。一般推荐 800-1200px 范围。如果需要夸张效果可设 400-600px，需要微妙效果可设 1200-2000px。
眩光和聚光灯有什么区别？
眩光(Glare)是覆盖整个卡片的径向渐变，模拟光线从鼠标位置照射过来的反射效果，通常使用 mix-blend-mode: overlay。聚光灯(Spotlight)是一个更聚焦的圆形高光，范围更小但更亮，模拟舞台聚光灯效果。两者可以同时使用。
如何在项目中使用生成的代码？
复制 HTML、CSS、JavaScript 三个部分的代码，分别粘贴到你项目的对应位置。确保卡片的父容器有 perspective 属性。代码零依赖，不需要任何外部库，可以直接在原生HTML项目中使用。