纯CSS信封效果核心是transform+perspective+精确transform-origin：盖子需设transform-origin: bottom center（或50% 100%），perspective必须加在父容器并配transform-style: preserve-3d，避免overflow:hidden截断内容及pointer-events失效。
纯 CSS 实现信封效果，核心不靠图片、不依赖 SVG，关键在 transform + perspective + 精确的 transform-origin 控制。多数失败案例，其实是盖子旋转轴没对齐、z-index 层叠错乱，或漏了 backface-visibility: hidden 导致背面穿模。
信封盖翻转动画必须设 transform-origin
信封盖（flap）不是绕中心转，是绕底部边缘向上掀开。若不显式指定原点，rotateX() 会默认绕元素中心，结果就是“飘起来”而不是“掀开”。
-
transform-origin: bottom center是最常用且稳定的写法（适用于盖子高度占信封 20%~30% 的常见比例） - 如果盖子用
position: absolute且top偏移为负值（比如top: -15px），则需改用transform-origin: 50% 100%，避免因定位偏移导致原点计算偏差 - 切勿只写
transform-origin: bottom—— 浏览器兼容性差，Safari 旧版可能失效
perspective 必须加在父容器，不能只加在盖子上
3D 效果依赖透视投影，但 perspective 只对**后代元素的 3D 变换**生效，加在 .envelope__flap 自身无效。
- 正确做法：给信封外层容器（如
.envelope）设置perspective: 800px，单位必须是 px 或 rem，不能是 % - 值太小（如
100px）会导致翻转形变夸张；太大（如3000px）则像平面旋转，失去立体感；推荐范围：600px–1200px - 同时要加
transform-style: preserve-3d到同一容器，否则子元素的 3D 位置会被扁平化
展开后内容显示常被 overflow: hidden 截断
信封打开时，内部信纸（.envelope__body）通常用 transform: translateY() 或 height 动画推出来，但若父容器有 overflow: hidden，内容就会被砍掉。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 检查
.envelope是否意外设置了overflow: hidden—— 这是最隐蔽的坑，控制台里看不见，但动画卡在半途 - 更稳妥的做法：把信纸做成绝对定位、脱离文档流，用
z-index确保它在盖子上方，再配合opacity和transform控制进出 - 不要用
display: none/block切换信纸，会导致过渡中断；改用visibility: hidden/visible+opacity+transform
移动端点击无响应？检查 cursor 和 pointer-events
信封在 iOS Safari 或部分安卓 WebView 中点不动，大概率是交互层缺失。
- 确保信封容器有
cursor: pointer（非必需但能提示用户可交互） - 确认没有父级元素设置了
pointer-events: none，尤其当信封嵌在轮播图、弹窗或 canvas 上层时 - 如果用了
transform: scale(0.99)类似 hack 来触发硬件加速，某些旧版 WebView 会误判为不可点击区域，建议改用will-change: transform
真正难的不是写出第一个能动的信封，而是让盖子掀开角度刚好、阴影自然、不同屏幕下都不穿帮——这些全靠反复调 transform-origin 坐标和 perspective 值，别信“一套参数通吃”的说法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
