用CSS transform+perspective实现立体翻转需严格遵循规则：perspective必须设在翻转元素的直接父容器上，值取800px–1200px；transform-style: preserve-3d和backface-visibility: hidden须成对且三层声明；.back需初始rotateY(180deg)；transition须写在常态样式中；移动端需JS切类。
直接用 CSS 的 transform + perspective 就能做出立体翻转，不需要 JS 或框架；但漏掉任意一个关键属性，翻转就会卡在 90°、闪白、文字镜像，甚至根本不动。
perspective 必须加在父容器上，不是翻转元素本身
很多人写成 .card { perspective: 1000px; }，结果没效果——perspective 必须作用于**翻转元素的直接父级**，比如 .card-container。这个值决定“你离卡片多远”：太小（如 200px）边缘畸变严重，太大（如 5000px）就退化成平面旋转。800px–1200px 是稳妥区间，按钮类用 1200px，卡片类用 1000px 更自然。
- 父容器不能是
display: inline或没设宽高，否则透视失效 - 移动端可放大到
1600px，避免小屏下变形过猛 - 如果卡片带阴影，
perspective太小会导致阴影拉伸撕裂
transform-style: preserve-3d 和 backface-visibility: hidden 必须成对出现
transform-style: preserve-3d 要加在真正执行 rotateY() 的那个元素上（通常是 .card 或 .flipper），否则子元素会被压平成 2D，翻转后背面直接消失。而 backface-visibility: hidden 必须分别加在正面、背面、以及它们的直接父容器（如 .flipper）三层上——漏掉任何一层，翻转中途就会透出背面内容或双影。
-
.front和.back都要设position: absolute+top: 0; left: 0;，否则定位错位 -
.back初始必须加transform: rotateY(180deg)，不然 hover 一触发会先“弹”一下再翻 - iOS 微信 WebView 偶尔掉支持，可补
-webkit-backface-visibility: hidden
transition 必须声明在常态样式里，不能只写在 :hover 中
写成 .card-container:hover .card { transform: rotateY(180deg); transition: transform 0.6s; } 是错的——transition 必须提前写在 .card 的常态样式中：.card { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }。否则首次 hover 会掉帧，动画卡顿。
立即学习“前端免费学习笔记（深入）”；
- 别写
transition: all 0.6s，会触发布局重排，更卡 - 用
cubic-bezier(0.4, 0, 0.2, 1)比ease-out收尾更顺滑 - 不要对
perspective或transform-style做 transition，它们不触发动画，只会白屏
移动端点击翻转必须用 JS 切类，:hover 基本无效
纯 :hover 在手机上不可靠，:active 松手就回弹。可靠做法是：HTML 中给翻转容器加 tabindex="0"（兼顾键盘焦点），JS 绑定 click 并切换 is-flipped 类：.card.is-flipped { transform: rotateY(180deg); }。
- 用
element.classList.toggle('is-flipped')，比setAttribute更轻量 - 连点多次易错乱，可在
transitionstart事件里临时加pointer-events: none - 图片模糊？优先检查是否漏了
will-change: transform（仅必要时加）和background-size: cover
最常被忽略的是 .back 的初始 rotateY(180deg) 和 backface-visibility: hidden 在三层上的重复声明——这两处一漏，整个翻转就失去立体感，变成生硬的平面切换。
