用transition制作立体卡片翻转需四步：设外层perspective创建3D视角；子容器加transform-style:preserve-3d保持空间；两面设backface-visibility:hidden并预置.back为rotateY(180deg)；最后给子容器加transform过渡动画。

用 transition 制作立体卡片翻转，关键不是单纯加动画，而是先搭好 3D 空间，再让旋转“有深度、不穿帮”。整个过程纯 CSS，不用 JS，核心就四步：设透视、保空间、藏背面、加过渡。

设置 perspective 创建 3D 观察视角

perspective 必须加在外层容器上（比如 .card），不能加在要翻转的元素本身。数值越大，3D 感越平缓；一般 800px–1200px 比较自然。太小会显得夸张变形，太大会像平面旋转。

• .card { perspective: 1000px; }
• 这个属性定义了“眼睛”离卡片的距离，是产生立体感的前提

用 transform-style: preserve-3d 保持子元素的 3D 空间

真正执行翻转的元素（比如 .card-inner 或直接是 .card）必须声明 preserve-3d，否则子面（front/back）一旋转就会坍缩回 2D 平面，翻转变“抽搐”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• .card-inner { transform-style: preserve-3d; }
• 它告诉浏览器：“前后两面都在同一个 3D 坐标系里，请按真实空间计算位置”

隐藏背面 + 预设初始角度

两个面都要设 backface-visibility: hidden，否则翻转一半时会看到背面内容透过来。背面默认要 rotateY(180deg)，这样初始状态它正对着用户但被隐藏，一翻转就刚好正向显示。

• .card-face { backface-visibility: hidden; }
• .back { transform: rotateY(180deg); }
• 正面不用写 transform，默认是 rotateY(0)

用 transition 控制翻转动画节奏

给执行翻转的容器（如 .card-inner）加 transition，作用在 transform 属性上。时间建议 0.5s–0.7s，函数推荐 ease-out 或 cubic-bezier(0.34, 1.56, 0.64, 1)，比默认 ease 更有弹性。

• .card-inner { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
• 触发方式可以是 .card:hover .card-inner { transform: rotateY(180deg); }，也支持点击切换类名实现手动控制