TEXT EFFECT
翻转词Flip Words
一个固定宽度的词位里，候选词像翻牌一样绕 X 轴翻进翻出。Aceternity UI 的 Flip Words 是标准命名。
效果预览
我们让
设计开发上线
更快
适合用在哪
标题中间的变量词（「我们让 ___ 更快」）、行业/角色轮换、属性切换展示。
容易踩的坑
- 词位宽度按最短词预留，长词翻入时被截断或撑开整行。
- perspective 低于 400px 时翻转透视过强，文字边缘明显变形。
- 轮换词对读屏不可见或全部念出，应提供完整句子的 sr-only 文本。
设计提示词 · Prompt
翻转词（Flip Words）：词位容器设固定宽高与 overflow:hidden，perspective 保持在 400-600px。每个候选词绝对定位铺满词位，稍带浅底与主色文字、圆角 5px。动画 4.5s cubic-bezier(.4,0,.2,1) 无限循环：0% 时从 rotateX(-92deg) translateY(9px) opacity:0 翻入，8%-26% 完全正对，34% 后翻出到 rotateX(92deg) translateY(-9px) opacity:0。词的 delay 依次错开 1.5s，保证只有一个在正面。词位宽度要按最长候选词预留，避免文字跳动。
Flip Words: the word slot container has a fixed width and height with overflow:hidden, and perspective kept at 400-600px. Each candidate word is absolutely positioned to fill the slot, with a light background, primary-color text, and border-radius 5px. Animate 4.5s cubic-bezier(.4,0,.2,1), infinite: at 0% flip in from rotateX(-92deg) translateY(9px) opacity:0, fully facing forward at 8%-26%, and after 34% flip out to rotateX(92deg) translateY(-9px) opacity:0. Stagger each word's delay by 1.5s so only one faces front. Reserve the slot width for the longest candidate to avoid text jumping.
常见搭配
同一页面里经常和「翻转词」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="tx-flip">
<span>我们让</span>
<span class="tx-flip__w"><i>设计</i><i>开发</i><i>上线</i></span>
<span>更快</span>
</div>
</div>