MOTION EFFECT
3D 跑马灯3D Marquee
两排卡片在透视倾斜的平面上反向滚动，做出立体纵深。Aceternity UI 用它展示客户评价或合作方。
效果预览
Figma
Notion
Linear
Vercel
Stripe
Figma
Notion
Linear
Vercel
Stripe
★★★★★
很好用
★★★★★
效率翻倍
★★★★★
很好用
★★★★★
效率翻倍
★★★★★
很好用
适合用在哪
客户评价墙、合作品牌展示、作品集轮播。比平面 Logo Marquee 更有空间感。
容易踩的坑
- 倾斜透视后远端卡片文字变形缩小，评价内容几乎无法阅读。
- 滚动不支持悬停暂停，用户想读一条评价时它已经滑走了。
- 复制的那份内容未加 aria-hidden，读屏会把每条评价念两遍。
设计提示词 · Prompt
3D 跑马灯（3D Marquee）：外层 perspective:420px；里面两行 flex 卡片条，各自 transform: rotateY(-22deg) rotateX(6deg)，宽度超出容器（right:-40%）并复制一份内容用于无缝衔接。第一行动画 7s 线性无限循环，translateX 从 0 到 -50%；第二行方向相反（从 -50% 到 0）并降低 opacity 到 .72 做层次。卡片宽 74px 高 38px、白底细描边、小圆角、微弱阴影。两行分别用 top 定位错开。
3D Marquee: the outer layer has perspective:420px; inside are two rows of flex card strips, each with transform: rotateY(-22deg) rotateX(6deg), wider than the container (right:-40%), with the content duplicated for a seamless loop. The first row animates 7s linear, infinite, translateX from 0 to -50%; the second row runs the opposite direction (from -50% to 0) with opacity lowered to .72 for depth. Cards are 74px wide and 38px tall, white with a thin border, small radius, and a faint shadow. Offset the two rows with top positioning.
常见搭配
同一页面里经常和「3D 跑马灯」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-mq3d">
<div class="m-mq3d__row m-mq3d__row--a" style="top:26px">
<div class="m-mq3d__c">Figma</div><div class="m-mq3d__c">Notion</div><div class="m-mq3d__c">Linear</div><div class="m-mq3d__c">Vercel</div><div class="m-mq3d__c">Stripe</div><div class="m-mq3d__c">Figma</div><div class="m-mq3d__c">Notion</div><div class="m-mq3d__c">Linear</div><div class="m-mq3d__c">Vercel</div><div class="m-mq3d__c">Stripe</div>
</div>
<div class="m-mq3d__row m-mq3d__row--b" style="top:68px">
<div class="m-mq3d__c">★★★★★</div><div class="m-mq3d__c">很好用</div><div class="m-mq3d__c">★★★★★</div><div class="m-mq3d__c">效率翻倍</div><div class="m-mq3d__c">★★★★★</div><div class="m-mq3d__c">很好用</div><div class="m-mq3d__c">★★★★★</div><div class="m-mq3d__c">效率翻倍</div><div class="m-mq3d__c">★★★★★</div><div class="m-mq3d__c">很好用</div>
</div>
</div>