翻转文字（逐字 X 轴翻转交错 CSS 源码）

效果演示（真实可交互）

下方「粤喵翻转过山车」七个字，把鼠标放上去，每个字会像过山车一样绕水平轴翻转一圈，相邻字依次错开 0.05 秒，偶数位反向翻转，产生波浪般的交错感。点击「翻转一次」按钮，所有字会同步翻一个 360°，结束后恢复；取消勾选「悬停翻转」可以关闭悬停触发，只保留按钮控制。

完整代码

HTML 结构：JS 把词语拆成字符 span，并写入错峰延迟：

<div class="fp-stage">
  <p class="fp-word" id="fpWord">粤喵翻转过山车</p>
</div>

核心 CSS：父容器开 perspective 建立 3D 视场，字符默认在悬停时用 transition 翻转，偶数字反向：

.fp-stage { perspective: 600px; }
.fp-word span {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s);
}
.fp-word.hoverable:hover span { transform: rotateX(360deg); }
.fp-word.hoverable:hover span:nth-child(2n) { transform: rotateX(-360deg); }

按钮单次翻转用关键帧 + animationend 清理：

.fp-word span.flip { animation: fpFlip .8s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--d, 0s); }
@keyframes fpFlip {
  0% { transform: rotateX(0); }
  100% { transform: rotateX(360deg); }
}

btn.addEventListener('click', () => {
  [...word.children].forEach((s) => {
    s.classList.add('flip');
    s.addEventListener('animationend', () => s.classList.remove('flip'), { once: true });
  });
});

参数说明

兼容性与性能

• perspective 与 rotateX 属标准 CSS 3D 变换，现代浏览器原生支持，无前缀要求
• 变换走合成层，逐字翻转性能良好；单行建议不超过 20 个字符
• transform-origin 默认 50% 50%，如需「翻书」感可改为 50% 100%（底边为轴）
• 悬停翻转依赖 :hover，触屏设备无悬停态，请保留按钮触发作为移动端入口

常见问题

Q: 翻转时文字看起来是扁的？ 透视距离太小（如 100px）会过度透视。加大到 500–800px，翻转过程更接近真实的「翻面」。

Q: 想做成垂直翻页效果？ 把 rotateX 换成 rotateY，并把 transform-origin 改为 0 50%（左边为轴），就是常见的翻牌动画。

Q: 触屏上没有悬停怎么触发？ 本组件已提供「翻转一次」按钮；也可以把悬停类改为 :active 或监听 touchstart。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。