加 backface-visibility: hidden 可解决 h5 3d 卡片翻转毛边闪烁，但需作用于真正执行 rotatey 的子元素（.card-front/.card-back），配 -webkit 前缀、真实 3d 变换（如 translatez(0)）、统一 transition 和 transform-style 到容器，并避免 filter/display:none 等干扰属性。
在 H5 页面中做 3D 卡片翻转时出现边缘毛边或闪烁，本质是浏览器在帧间错误渲染了背面像素，或因图层合成策略切换导致渲染路径不稳定。加 backface-visibility: hidden 能直接裁掉背面，但必须满足几个硬性条件才能真正起效。
必须作用于真正翻转的子元素
很多人把 backface-visibility: hidden 写在卡片容器（如 .card）上，结果在 iOS Safari 或安卓 WebView 中依然闪——因为实际执行 rotateY(180deg) 的是 .card-front 和 .card-back 这两个子元素。浏览器只对「正在做 3D 变换」的元素应用该属性。
-
正确写法：
.card-front, .card-back { backface-visibility: hidden; } -
移动端兼容补全：加上
-webkit-backface-visibility: hidden;，尤其针对 Android Chromium 90–99 内核 - 两个面都要加，漏掉任意一个，90° 左右就可能透出背面文字或色块
必须搭配真实 3D 变换激活 GPU 合成
仅写 backface-visibility: hidden 不会触发硬件加速，Chrome 和 Safari 会跳过该属性判定。它只响应明确启用 Z 轴空间的变换。
-
有效组合：
transform: rotateY(180deg)、transform: translateZ(0)或transform: translate3d(0, 0, 0) -
无效写法：
transform: rotate(180deg)（纯 2D）、transform: scale(1) rotateZ(0)—— 不激活 3D 渲染管线 -
稳妥做法：给每个翻转面都加
transform: translateZ(0)，哪怕已用rotateY；避免加在.card容器上，否则子元素 Z 坐标系偏移，翻转错位
transition 和 transform-style 必须统一绑定在容器上
如果把 transition: transform 分别写在 .card-front 和 .card-back 上，它们会按各自初始状态独立动画，造成正面转到 120° 时背面才动，视觉上撕裂、飘忽甚至露出边缘毛边。
-
正确绑定：
.card { transition: transform 0.6s cubic-bezier(.25,.75,.5,1); } -
父级需设 3D 上下文：
.card { transform-style: preserve-3d; perspective: 1000px; }（perspective 推荐设在容器，不要重复设在子元素） - 避免同时使用
will-change: transform，Chrome 120+ 对其更敏感，可能引发重绘抖动
避开干扰渲染的其他 CSS 属性
某些属性会让 GPU 渲染降级，导致 backface-visibility 失去生效前提，进而让边缘毛边和闪烁重现。
- 慎用
filter、backdrop-filter、mask等合成开销大的属性，尤其不要加在翻转面上 - 避免用
display: none或v-show控制显隐——图层被销毁重建，backface-visibility失效；改用opacity: 0; pointer-events: none; - 确保翻转元素尺寸为偶数像素，旋转角度用整数（如 180deg），减少亚像素渲染带来的毛边
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
