perspective必须设在父容器（如.card-wrapper）而非.card自身，值取800px–1200px；需配合transform-style: preserve-3d、backface-visibility: hidden（正反面均设）、object-fit: cover及带单位的px/em/rem数值。
perspective 必须设在外层容器，不能写在翻转元素上
很多人把 perspective 加到 .card 自身上，结果翻转看起来像平面旋转——因为透视没生效。它必须作用于「观察者视角」的父级，也就是卡片的直接包裹容器（比如 .card-wrapper）。值选 800px 到 1200px 比较稳妥：500px 太近容易畸变，2000px 又太远失去立体感。
- 错误写法：
.card { perspective: 1000px; }→ 子元素无法继承该透视空间 - 正确写法：
.card-wrapper { perspective: 1000px; }，且该容器需有明确宽高或触发 BFC - 如果外层是
flex或grid容器，记得加transform-style: preserve-3d到同一层级，否则子元素仍被压平
backface-visibility: hidden 是防穿透的关键，正反面都要加
只给背面加 backface-visibility: hidden 不够。翻转过程中，正面也会短暂“背对”观察者，若没隐藏，就会透出背面内容，造成双影、重叠或镜像错乱。这个属性必须同时加在正反两个面的 class 上。
- 漏掉正面会导致 hover 翻转一半时看到「背面的背面」——即原始正面内容反向投影
- 常见错误：用
:before/:after做双面却只给伪元素设该属性，而忘了主元素本身也需要 - 配合
transform-style: preserve-3d才真正启用 3D 渲染管线，否则backface-visibility无效
rotateY(180deg) 触发时机要统一在父容器 hover 上
直接对 .card 写 :hover 容易因鼠标移入空隙（比如两图之间）导致翻转中断。更稳定的做法是把 :hover 绑定在外层容器（如 .card-wrapper），再用后代选择器驱动内部变换。
- 避免写
.card:hover { transform: rotateY(180deg); }，鼠标划过边缘可能失焦 - 推荐写
.card-wrapper:hover .card { transform: rotateY(180deg); } - 如果卡片含文字或按钮，确保
.card的transform-origin保持默认center center，否则旋转轴偏移会引发抖动 - transition 时间建议不小于
600ms，低于300ms人眼难识别翻转过程，易误判为闪烁
图片铺满又不变形，得靠 object-fit + backface-visibility 配合
用 <img alt="HTML翻转过渡效果怎么写？3D特效教程" > 做正反面时，直接设 width: 100%; height: 100% 会拉伸变形。但用 object-fit: cover 后，若不加 backface-visibility: hidden，翻转瞬间可能出现图像撕裂或边缘锯齿——这是 GPU 渲染层未同步导致的视觉残留。
立即学习“前端免费学习笔记（深入）”；
- 正面/背面
<img alt="HTML翻转过渡效果怎么写？3D特效教程" >都要设：object-fit: cover; width: 100%; height: 100%; display: block; - 务必搭配
backface-visibility: hidden，否则object-fit在翻转中会短暂失效 - 圆角溢出问题：给
.card设border-radius，但图片容器（如.front）也要加相同值，否则裁剪不同步
perspective: 1000（缺单位）会静默忽略，整个 3D 效果退化为 2D 旋转，且控制台不报错。 
