perspective 值设在 800px～1500px 区间最稳，1200px 是按钮类场景的甜点值，且必须加在翻转容器的父级上；backface-visibility: hidden 需同时作用于 .front、.back 和 .flipper 三层；transition 必须声明在 .flipper 的常态样式中，不可写在 hover 里。
perspective 值设多少才不怪异
太小（比如 200px）会让翻转像贴着鼻子转，边缘严重畸变；太大（比如 5000px）又几乎看不出纵深，变成平面旋转。实测在 800px～1500px 区间最稳，1200px 是多数按钮类场景的甜点值。
这个值必须加在**翻转容器的父级**上，不是按钮本身。常见错误是写成 .btn { perspective: 1200px; }，结果没用——得写成 .btn-container { perspective: 1200px; }，且该容器不能是 display: inline 或无宽高。
- 移动端可适当放大到
1600px，避免小屏下过度夸张 - 如果按钮带阴影或边框，
perspective太小会导致阴影拉伸失真，肉眼可见“撕裂感”
backface-visibility: hidden 必须加在哪几层
不是加一次就完事。它要出现在**所有参与翻转的直接子元素**上：正面、背面、以及包裹它们的翻转层（如 .flipper）。漏掉任意一层，翻转中途就会透出背面内容、文字重叠、甚至出现双影。
典型结构里，这三个地方都要写：.front、.back、.flipper。尤其注意 .flipper —— 它是 transform 的执行主体，若没设 backface-visibility: hidden，其子元素的 3D 空间会被压平，preserve-3d 就失效了。
立即学习“前端免费学习笔记（深入）”；
-
.flipper还必须配transform-style: preserve-3d，否则rotateY只会当 2D 转 - 不要给
:before/:after伪元素单独设backface-visibility，它们依附于宿主元素，宿主设了就行
hover 触发翻转时 transition 容易卡顿
卡顿往往不是性能问题，而是 transition 写错位置。必须写在 **翻转层（.flipper）上**，而不是 hover 选择器里。写成 .flip-container:hover .flipper { transform: rotateY(180deg); transition: transform 0.6s; } 是错的——transition 得提前声明在常态样式中。
正确写法：.flipper { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }。这样浏览器才能提前准备 GPU 图层，避免首次 hover 时掉帧。
- 用
cubic-bezier(0.4, 0, 0.2, 1)替代ease-out，收尾更自然，不像机械转动 - 别对
perspective或transform-style做 transition，它们不触发动画，只会白屏或闪动 - 快速连 hover 时，transition 不会中断重置，所以翻转中途移开鼠标，它会自动回弹，无需 JS 干预
按钮文字在翻转中模糊或抖动
本质是浏览器对 3D 变换中文本渲染的策略不稳定，尤其在 Chrome 和 Safari 上。单纯加 will-change: transform 效果有限，还可能引发白屏。
真正有效的组合是：transform: translateZ(0) 强制图层提升 + backface-visibility: hidden 防透出 + 给文字容器加 font-smooth: antialiased（WebKit）和 -webkit-font-smoothing: antialiased。
- 图片需额外处理：
image-rendering: -webkit-optimize-contrast（Safari）、image-rendering: crisp-edges（Chrome/Firefox） - 避免在翻转层内用
line-height或vertical-align动态调整文字位置，这会触发重排，加剧抖动 - 如果按钮含图标字体（如 Font Awesome），确保其
font-size是偶数像素，奇数尺寸在旋转时更容易糊
perspective 的作用域和 backface-visibility 的层级覆盖——写错一层，整个 3D 空间就塌了。 
