卡片翻转背面文字镜像因未设backface-visibility:hidden，需加在正背面子容器；perspective须设于父容器且用px单位（推荐1000–2000px）；transition失效常因缺初始transform或未触发gpu加速。
直接用 transform: rotateY(180deg) 配合 transform-style: preserve-3d 就能实现，但翻转卡顿、背面内容反向、移动端失效——这些问题几乎都出在透视层级和触发条件上。
为什么卡片翻转后背面文字是镜像的？
这是最常被忽略的渲染行为：3D 翻转后，背面元素默认仍面向观察者，但视觉上被“翻过来了”，文字自然镜像。解决方式不是加 transform: scaleX(-1) 这种补丁，而是正确使用 backface-visibility: hidden。
-
backface-visibility: hidden必须加在翻转的子容器（即正面/背面两个面）上，不是父容器 - 不加它，Chrome/Firefox 会渲染背面帧的镜像副本；Safari 更激进，可能直接跳过绘制
- 如果背面需要显示不同内容（比如表单+确认文案），就靠这个属性让正面消失、背面自然浮现，而非靠 z-index 覆盖
perspective 值设多少才不突兀？
perspective 决定“镜头离卡片多远”，值越小，3D 感越强、旋转弧度越夸张；越大越平、越像2D过渡。但设错位置或单位，效果直接失效。
- 必须加在**翻转动画的父容器**上，例如卡片容器
.card，不能加在.card__front上 - 推荐值范围：
1000px到2000px；500px以下容易产生畸变，5000px以上基本看不出3D感 - 不要用
rem或vh，浏览器对非px单位的 perspective 解析不一致，尤其 iOS Safari
transition 触发翻转时为什么没动效？
常见于 hover 翻转场景：CSS 写了 transition: transform 0.4s ease，但鼠标移入毫无反应。根本原因通常是 transform 的初始值缺失或层级未触发硬件加速。
- 确保翻转容器（如
.card）有明确初始transform: rotateY(0deg)，否则从 “无 transform” 到 “rotateY(180deg)” 不触发 transition - 给容器加
transform: translateZ(0)或will-change: transform，强制 GPU 加速；iOS Safari 尤其依赖这个 - 避免在
:hover中同时改transform和opacity，部分 Android WebView 会丢掉 transform 动画
真正卡住的点往往不在 rotateY 本身，而在于 perspective 作用域、backface-visibility 的作用对象、以及是否让浏览器意识到“这该走 3D 渲染管线”。调通前先检查这三个地方，比反复调 easing 函数有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
