transform-style: preserve-3d 是实现真实3d卡片翻转的前提，否则子元素rotatey会扁平化为2d贴纸效果；需配合perspective、backface-visibility: hidden及正确rotatey轴向使用。
为什么 transform-style: preserve-3d 是翻转前提
不加这句，子元素的 rotateY 会扁平化到父容器平面，看起来像在“贴纸旋转”，而不是真卡片翻转。浏览器默认是 transform-style: flat，相当于把 3D 变换强行拍成 2D 投影。
实操建议：
- 必须作用于卡片容器（比如
.card），不是翻转内容层 - 父容器不能有
overflow: hidden，否则 3D 溢出部分会被裁掉 - 若父容器有
perspective，优先写在它身上；没有就写在卡片容器上，但效果稍弱
hover 触发翻转时，backface-visibility 必须设为 hidden
不然翻转到背面时，正面内容会透过背面“透出来”，尤其在 Chrome 里特别明显。这不是 bug，是 3D 渲染的默认行为——正反面都渲染，且无遮挡判断。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 翻转一半卡住，背面和正面同时显示
- 翻转后文字模糊、边缘发虚（GPU 加速未生效，常因
backface-visibility: visible导致）
正确写法：给翻转的两面（.card__front 和 .card__back）都加上 backface-visibility: hidden。
用 transform: rotateY(180deg) 实现左右翻转，别用 rotateX 混淆场景
用户搜“3D 卡片翻转”，90% 想的是水平轴翻页效果（如商品卡、信息面板），不是上下翻。用 rotateX 容易误判视角，还可能触发移动端 Safari 的渲染异常。
使用场景与参数差异：
- 左右翻转 →
rotateY(180deg)，适合大多数卡片布局 - 需要“翻书感”？加
transform-origin: left center或right center，但注意这会让动画中心偏移 - 想让翻转更自然？配合
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1)，比ease-out更有惯性
示例关键 CSS：
.card {
perspective: 1500px;
}
.card:hover .card__inner {
transform: rotateY(180deg);
}
.card__inner {
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card__front,
.card__back {
backface-visibility: hidden;
}
移动端 hover 不触发？别硬套 desktop 写法
iOS Safari 和 Android Chrome 对 :hover 支持极弱——只有第一次点击才模拟一次 hover，之后失效。这不是 CSS 问题，是触摸设备的交互逻辑限制。
实操建议：
- 用
:active替代部分场景（比如点按翻转），但仅限单次操作 - 真正可靠的做法：加 JS 监听
click或touchstart，切换一个.is-flipped类名，CSS 基于类控制状态 - 避免在
@media (hover: none)下还保留 hover 动画，会导致无响应+白屏风险
容易被忽略的一点：3D 变换在低端安卓机上可能闪屏或卡顿，加 will-change: transform 到 .card__inner 能提前提示 GPU 加速，但别滥用——只加在真正频繁动画的元素上。
