必须设transform-style: preserve-3d，否则子元素被压平成2d，rotatey/x无效；需加在直接包裹正反面的容器上，且移动端需补-webkit前缀。

翻转动画必须设 transform-style: preserve-3d

不加这句，所有子元素都会被压平成2D，rotateY 或 rotateX 看不出翻转效果，只像左右/上下位移。它不是可选项，是3D翻转的开关。

常见错误现象：

• 背面内容在未翻转时就显示出来（backface-visibility: hidden 失效）
• 翻转卡顿、跳变，或只动了一半
• Chrome 正常，Safari 完全不动——大概率漏了 preserve-3d 或没加 -webkit-transform-style

实操建议：

• 必须加在直接包裹前后两面的容器上（比如 .card），而不是最外层 .card-container
• 移动端 Safari 需补前缀：-webkit-transform-style: preserve-3d
• 如果用了 Flex 或 Grid 布局，确认父容器没有意外触发 transform（如 scale），会干扰 3D 上下文

backface-visibility: hidden 要加在正反两面元素上

只给正面加没用，背面也得加。否则翻转到一半时，背面会“透”出来，像双面胶纸一样叠在一起。

使用场景：

• 卡片类交互（产品信息/问答折叠）
• 按钮悬停反馈（如「确认/取消」双态切换）
• 表单验证提示（正面输入框，背面错误文案）

参数差异：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• hidden：彻底隐藏不可见面（推荐）
• visible：两面始终可见，适合做双面展示（如骰子、多面体）
• 不写该属性 = 默认 visible，这是很多初学者翻转“穿模”的根源

hover 触发和 click 触发的 DOM 结构要分开设计

用 :hover 实现翻转，结构可以扁平；但想用 JavaScript 控制点击翻转，就得提前把背面内容旋转好，且靠 class 切换而非伪类。

容易踩的坑：

• 用 :hover 写法却在 JS 中 toggle .flipped，结果 hover 和 click 行为互相打架
• 移动端没有 hover，纯 :hover 的翻转在 iOS 上点一下才触发，再点一下才恢复，体验断裂
• 用 transform: rotateY(180deg) 初始化背面时，忘了同时设 backface-visibility: hidden，导致初始状态就显示背面

实操建议：

• hover 场景：直接用 .card-container:hover .card 控制变换
• click 场景：用 .card.is-flipped 类，JS 只负责增删这个类，CSS 全权处理动画
• 兼顾响应式：对触摸设备加 @media (hover: none) 回退为 click 触发

perspective 值太小会让翻转变形，太大又没立体感

这不是一个“越大越好”的值。perspective: 1000px 是经验起点，但实际要看卡片尺寸和页面密度。

性能与兼容性影响：

• 值低于 300px：翻转像被拉长的纸片，边缘扭曲明显（尤其大卡片）
• 值高于 2000px：几乎看不出深度，退化为平面旋转
• IE11 不支持 perspective 在非定位元素上生效，必须给容器加 position: relative

调试技巧：

• 先设 perspective: 800px，卡片宽高比接近 3:2 时通常自然
• 卡片越“厚”（视觉上纵深强），perspective 值越要调小（如 400–600px）
• 多个翻转卡片共存时，统一用外层容器设 perspective，别每个都设，避免透视冲突

翻转动画真正的复杂点不在旋转本身，而在如何让正反两面在任意角度下都保持正确的朝向、遮挡关系和交互响应——尤其是当背面有输入框、链接或 SVG 图标时，backface-visibility 和 transform-origin 的组合稍有偏差，就会出现点击失灵或文字倒置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！