CARD
3D 倾斜卡片3D Tilt Card
卡片默认带一点透视倾斜，悬停时回正；内部元素用 translateZ 分层，立体感立刻出来。
效果预览
PRO MEMBER
无限导出 · 优先队列 · 专属支持
NO.2048
适合用在哪
会员卡、门票、作品集封面、游戏道具展示。
容易踩的坑
- 倾斜角度超过 15° 时卡面文字严重变形，读不清内容。
- 未响应 prefers-reduced-motion，跟随鼠标的连续倾斜会让部分用户眩晕。
- transform-style 未设 preserve-3d，子元素 translateZ 全部失效，层次感消失。
设计提示词 · Prompt
3D 倾斜卡片（3D Tilt Card）：外层容器 perspective:800-1000px；卡片默认 transform:rotateX(8-12deg) rotateY(-10-14deg)，悬停回正到 0，过渡 400-500ms cubic-bezier(.34,1.4,.5,1)（带一点回弹）。卡内元素分别 translateZ(10-30px) 制造景深——标题最凸、正文次之、徽章最前。配合 JS 可让倾斜角度跟随鼠标连续变化。卡面建议深色 + 高光贴膜质感，像一张真实会反光的卡。
3D Tilt Card: the outer container uses perspective:800-1000px; the card defaults to transform:rotateX(8-12deg) rotateY(-10-14deg) and returns to 0 on hover, with a 400-500ms transition using cubic-bezier(.34,1.4,.5,1) (a slight bounce). Inner elements each use translateZ(10-30px) to create depth — the title protrudes most, body text less, and badges sit frontmost. With JS, the tilt angle can follow the mouse continuously. A dark card face with a glossy laminated texture is recommended, like a real card that reflects light.
常见搭配
同一页面里经常和「3D 倾斜卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-tilt">
<div class="d-tilt__card">
<b>PRO MEMBER</b>
<span>无限导出 · 优先队列 · 专属支持</span>
<span class="d-tilt__chip">NO.2048</span>
</div>
</div>