硬币翻转核心是绕Y轴3D旋转，需父容器设perspective和transform-style:preserve-3d，正反面用backface-visibility:hidden及translateZ(2px)模拟厚度，Safari需加-webkit前缀并动态控制will-change。
用 transform: rotateY() 实现硬币翻转的核心逻辑
硬币翻转本质是绕 Y 轴的 3D 旋转，不是靠多张图切换或 CSS 动画关键帧“模拟”。必须启用 3D 渲染上下文，否则 rotateY() 会静默失效（不报错，但没动画）。父容器要加 transform-style: preserve-3d，让子元素的 3D 变换不被扁平化；同时自身需有 perspective 值（比如 perspective: 1000px），否则旋转看起来像平面缩放。
- 硬币正面和反面必须是同一容器内的两个子元素（如两个
div），各自设backface-visibility: hidden，否则翻到背面时会透出正面 - 正面初始
transform: rotateY(0deg)，反面初始transform: rotateY(180deg) - 动画只需驱动父容器的
rotateY(180deg)→rotateY(360deg)，两个面会自然交换可见性
backface-visibility: hidden 不生效的常见原因
最常踩的坑：这个属性只对「有 3D 变换的元素」起作用，且依赖父级的 transform-style。如果父容器没设 preserve-3d，子元素即使写了 backface-visibility: hidden，也会被强制扁平化，背面永远可见。
- 检查父容器是否设置了
transform-style: preserve-3d（不能写在动画元素自己身上） - 确保翻转容器本身有
perspective，且值不宜过小（100px会导致畸变，800px–1200px更自然） - Safari 对
backface-visibility支持较严格，若仍透出，可加-webkit-backface-visibility: hidden兜底
硬币厚度与真实感：用 translateZ() 微调
纯 rotateY() 是纸片式翻转。要模拟硬币有厚度，得给正反两面分别加微小的 Z 轴偏移：
- 正面：
transform: rotateY(0deg) translateZ(2px) - 反面：
transform: rotateY(180deg) translateZ(2px) - 父容器
transform-origin: center（确保绕中心转，不是左上角）
这样翻转中两面会在 Z 轴上错开，配合 perspective 产生轻微景深，比纯平面更接近真实硬币。但 translateZ() 值别超过 5px，否则边缘拉伸明显，尤其在小尺寸容器里。
立即学习“前端免费学习笔记（深入）”；
.coin {
width: 120px; height: 120px;
perspective: 1000px;
}
.coin-inner {
width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.coin-inner.flipped {
transform: rotateY(180deg);
}
.coin-face {
position: absolute;
width: 100%; height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.coin-front {
transform: rotateY(0deg) translateZ(2px);
}
.coin-back {
transform: rotateY(180deg) translateZ(2px);
}
移动端 Safari 的 will-change 优化陷阱
iOS Safari 对 3D 变换的渲染优化比较激进，有时会跳帧或首帧卡顿。加 will-change: transform 能提前触发 GPU 加速，但只应在动画触发前一刻设置，动画结束立即移除。长期挂着 will-change 会导致内存占用升高、滚动卡顿。
- 不要在 CSS 里直接写
will-change: transform - 用 JS 在点击/悬停时动态加 class：
element.classList.add('animating') - 动画结束后监听
transitionend，再remove该 class
硬币翻转看着简单，真正跑顺的关键不在角度算得多准，而在 perspective、transform-style、backface-visibility 这三者的协作是否严密——少一个，就不是翻转，是闪烁、透图或干脆不动。
