仅靠transform-style: preserve-3d不足以实现可交互的3D翻转卡片，必须搭配父容器perspective和正反面backface-visibility: hidden；缺一导致扁平化、背面透出或消失。
能做，但必须用 transform-style: preserve-3d 和 perspective 搭配，缺一不可；否则翻转会“扁平化”，看不出立体感。
为什么按钮翻转后背面看不见？
常见原因是没设 backface-visibility: hidden，或者父容器没加 transform-style: preserve-3d。这两个是硬性前提：
-
backface-visibility: hidden必须加在正反两面元素上，否则翻转 180° 后背面仍会透出（尤其 Chrome 下明显） -
transform-style: preserve-3d必须加在直接包裹正反面的父容器上，不能只写在 body 或 wrapper 外层 - 如果用了伪元素
::before/::after做背面，它们默认不继承transform-style，得单独设
perspective 放哪才有效？
它必须作用于翻转动画的“观察者位置”，也就是正反面共同的父容器，而不是按钮本身或 body：
- 错：给
button加perspective: 1000px—— 无效，perspective不作用于自身变换 - 对：给外层容器（比如
.flip-btn）设perspective: 1000px，再让内部button或子元素做rotateY - 数值越小（如
500px），翻转越“夸张”；越大（如2000px）越“平缓”，建议从1200px起调
水平翻转 vs 垂直翻转的关键参数差异
方向不同，核心区别只在 rotateX 和 rotateY，但配套属性不能混用：
立即学习“前端免费学习笔记（深入）”；
- 水平翻转（左右翻）：用
rotateY(180deg)，配合transform-origin: center（默认即可） - 垂直翻转（上下翻）：用
rotateX(180deg)，但要注意容器高度是否足够，否则背面会被截断 - 两者都需确保正反面尺寸一致、定位重叠（常用
position: absolute; top: 0; left: 0;） - 别漏掉
transition: transform 0.4s ease，否则翻转瞬间跳变
最易被忽略的是：翻转容器若含文字，需额外处理字体渲染——某些浏览器下 rotateY 会让文字边缘发虚，加 backface-visibility: hidden 通常能缓解；若仍模糊，可尝试 -webkit-font-smoothing: antialiased 或换用更粗的字体权重。
