Letter Flip 字母翻转
Each letter flips a full 360 degrees on X, staggered by 0.15s — the stagger is the whole trick. 每个字母绕 X 轴翻整 360 度，彼此错开 0.15 秒——错位就是全部诀窍。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Every character is its own span with animation-delay: i*0.15s, so the wave of flips travels left to right. rotateX with a perspective on the parent means the letters tumble toward the viewer instead of just squashing vertically, which is what separates this from a cheap scale animation. 每个字符是独立 span，animation-delay 为 i*0.15s，翻转的波浪就从左往右推过去。父级带 perspective，所以字母是朝观者翻，而不是单纯上下压扁——这一点把它和廉价的缩放动画区分开了。
What to change可以改的地方
- 1Use rotateY for a flip like turning cards instead of a tumble toward the camera.
- 2Reduce the delay to 0.05s for a snappier, more mechanical rhythm.
- 1换成 rotateY，就是翻牌的感觉，而不是朝镜头滚。
- 2延迟缩到 0.05s，节奏更急、更机械。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。