直接用 transform: rotateY() 翻转失败的根本原因是未设置 transform-style: preserve-3d 和 perspective，导致子元素被压平、失去深度参照；perspective 需加在容器上，preserve-3d 加在卡片父级，背面需设 rotateY(180deg) 且 backface-visibility: hidden。
为什么直接用 transform: rotateY() 会翻转失败
多数人写完 CSS 就发现卡片只动了一下、不持续翻转，或者翻转后内容消失——根本原因是没设 transform-style: preserve-3d 和 perspective。没有这两个，浏览器就当 3D 是假的，所有子元素被压平到同一平面，rotateY() 失去深度参照。
-
perspective必须加在容器（比如.card-container）上，不是卡片本身；值太小（如100px）会让翻转夸张变形，建议1000px起步 -
transform-style: preserve-3d必须加在有子元素要参与 3D 变换的父级上（通常是卡片外层 wrapper），否则正面/背面永远共面 - 背面默认不可见，记得给背面加
backface-visibility: hidden，不然翻转一半时正反面会同时显示
HTML 结构必须满足的父子层级关系
3D 翻转依赖严格的 DOM 嵌套：容器 → 卡片容器（带 preserve-3d）→ 正面 + 背面。少一层或错位，CSS 就失效。
- 最外层是
<div class="card-container">，负责perspective - 中间层是
<div class="card">，设transform-style: preserve-3d和 hover 触发的transform: rotateY(180deg) - 内部两个子
<div class="card-face front">和<div class="card-face back">，分别设transform: rotateY(0deg)和transform: rotateY(180deg)
示例关键结构：
<div class="card-container">
<div class="card">
<div class="card-face front">正面内容</div>
<div class="card-face back">背面内容</div>
</div>
</div>
hover 触发翻转时常见的兼容性陷阱
Chrome/Firefox 支持良好，但 Safari 对 transform 的硬件加速敏感，容易卡顿或跳帧。别指望用 transition: transform 0.6s 一劳永逸。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 务必给
.card加transform: translateZ(0)或will-change: transform，强制启用 GPU 加速（Safari 尤其需要） - 避免在
front/back上写opacity或filter动画，它们会打断 3D 渲染层，导致翻转撕裂 - 移动端需额外加
cursor: pointer到.card，否则 iOS Safari 不响应 hover（实际是伪 hover）
怎样让翻转效果更自然不突兀
生硬的线性翻转看着像机械臂，关键在补间函数和初始状态。
- 用
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)模拟惯性回弹，比ease-in-out更顺滑 - 正面和背面都设
position: absolute，且宽高一致，否则翻转中会出现空白缝隙 - 如果卡片内容文字多，翻转时可能模糊——给
.card-face加-webkit-backface-visibility: hidden（Safari 专属兜底）
真正卡住的往往不是代码拼写，而是 perspective 值没生效、transform-style 漏写、或背面没设 transform: rotateY(180deg) —— 这三点漏一个，整个 3D 就塌了。
