立体倾斜卡片 · Tilt Card
英文：Tilt Card
动效与交互难度：入门 ★
🗣️一句话大白话
卡片跟随鼠标在 3D 空间轻微倾斜（rotateX/rotateY），像在手中转动。产品卡、视觉卡的“立体感”来源。倾斜卡片用 3D 透视：鼠标在卡片内的位置决定 rotateX/rotateY 角度（通常 ±8°），配合 translateZ 让内容浮起更有层次。告诉 AI“中心为原点、倾角 ≤8°、带透视 800px”。要点：倾角过大会变形；内部文字/图片加反方向微移（卡片内 parallax）效果更佳。
🖼️样图参考
🎬真实场景
产品展示卡、视觉卡、封面卡、作品集
📮你可以这样说
「【图像模型版】让 [卡片] 跟随鼠标 3D 倾斜：以卡片中心为原点，水平倾斜 ±8°、垂直倾斜 ±8°，鼠标离开后 300ms 回正；卡片内图片做反向微移增加层次。 【HTML/CSS/JS 版】[卡片] mousemove 算 offsetX/Y 比例，rotateX(-dy×8deg) rotateY(dx×8deg)，transform-style: preserve-3d，perspective: 800px，mouseleave 复位。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：倾斜=整体旋转；实际是“跟随鼠标位置的 3D 透视倾斜”
- ▸倾角超过 10° 会明显变形
🚫什么时候别用
- ✗正文长卡片（影响阅读）
- ✗移动端（无 hover，可禁或用手指手势）
🧩常见变体
±8° 标准倾角带内部浮层带高光跟随
💡小贴士
- ✦倾角 ≤8°、加 perspective 才有真 3D 感；别忘移动端降级
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗