卡片翻转需三层结构：外层设perspective（1000–2000px），中间层设transform-style: preserve-3d并绑定rotatey动画，正反面均设backface-visibility: hidden且背面预置rotatey(180deg)；移动端须用js切换class替代:hover，避免触控失效。
卡片翻转需要开启 3D 空间
纯用 transform: rotateY(180deg) 不会翻转，只会“压扁”成一条线——因为默认是 2D 平面，没有景深。必须给父容器加 transform-style: preserve-3d，同时确保翻转元素有 backface-visibility: hidden，否则背面内容会透过来。
常见错误：只给翻转层加 perspective，其实它应该作用在容器上（比如卡片外层 wrapper），否则旋转中心偏移、角度失真。
-
perspective值建议 1000–2000px，太小会夸张变形，太大则看不出立体感 - 翻转动画必须绑定在触发元素（如
.card）上，不能只动正面或背面单独的 div - Chrome/Firefox 支持良好，但 Safari 对
preserve-3d在 flex/grid 容器内偶尔失效，可改用display: block+position: relative套一层
HTML 结构决定翻转逻辑是否可控
最稳妥的结构是三层嵌套：.card（带 perspective）→ .card-inner（preserve-3d + 翻转动效）→ .card-front 和 .card-back（均设 backface-visibility: hidden，且 .card-back 预先 transform: rotateY(180deg)）。
如果把 .card-front 和 .card-back 并列放在同一级，靠 hover 触发 .card 的 rotateY，就不用手动控制子元素旋转，逻辑更干净。
.card {
perspective: 1500px;
}
.card-inner {
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
backface-visibility: hidden;
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
.card-back {
transform: rotateY(180deg);
}
hover 翻转在触摸设备上会失效
iOS 和 Android 默认不触发 :hover，点一下就翻过去，再点一下才翻回来，但用户可能误以为卡住了。解决方案不是加 JS 监听 click，而是用 :focus-within + tabindex，或者直接上 JS 控制 class 切换。
- 给
.card加tabindex="0"，支持键盘聚焦，也激活移动端点击反馈 - 避免用
ontouchstart立即翻转，会导致快速连点时状态错乱；推荐用click+classList.toggle() - 若需兼容微信内置浏览器（尤其旧版），
transform: rotateY在某些机型上渲染异常，可加-webkit-transform前缀并强制硬件加速：transform: translateZ(0) rotateY(180deg)
性能差通常是因为没关掉 layout 触发
翻转动画卡顿，90% 是因为用了 top/left/width/height 这类触发布局（layout）的属性。所有动效必须只依赖 transform 和 opacity。
检查点：.card-front 和 .card-back 是否用了 margin 或 padding 影响尺寸？是否设置了 border 导致每次重绘都重新计算盒模型？
- 把边框改用
box-shadow模拟，避免 layout - 文字内容尽量用
will-change: transform提前告知浏览器要动，但别滥用——只加在.card-inner上 - 如果卡片内部有图片，确保已设
width/height，防止加载时页面跳动引发 layout 波动
perspective 位置、backface-visibility 是否漏写、以及触摸场景下的交互反馈是否明确。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
