transform-style: preserve-3d 必须加在父容器（如 .cube）上，否则子元素3D变换会被拍平到父平面；它启用真实3D空间渲染，需配合 perspective 和正确作用于 .cube 的 rotateX/Y 变换。
为什么 transform-style: preserve-3d 必须加在父容器上
不加这句，子元素的 3D 变换会“拍平”到父容器平面，立方体六个面永远叠在一起，看起来像一张纸。它不是让某个面有 3D 效果，而是告诉浏览器：“这个容器里的子元素，要按真实 3D 空间位置渲染”。
常见错误：只给 .face 加 transform，却忘了给 .cube（包裹六个面的父元素）设 transform-style: preserve-3d。
-
.cube必须设transform-style: preserve-3d，且不能是flat（默认值） -
.cube最好同时设perspective（如perspective: 1000px），或在外层容器上设，否则旋转时纵深感弱、边缘发虚 - 若用
transform: rotateX() rotateY()控制旋转，必须作用在.cube上，而非单个面
rotateX 和 rotateY 的角度怎么对应前后左右面
立方体六个面的位置由初始 transform 决定，不是靠旋转“转出来”的。每个面先用 translateZ 推到正负半边长位置，再统一绕中心旋转 —— 所以“前”面是 translateZ(100px)，“后”面是 translateZ(-100px)，左/右/上/下同理。
旋转控制的是整个 .cube 的朝向，不是单个面的翻转。比如 rotateY(45deg) 是让整个盒子绕 Y 轴转 45°，所有面同步动。
- 面定位靠
transform: translateZ()（±边长） +rotateX/Y()（调整朝向） - 前后面：只用
translateZ，不用额外旋转 - 上下面：先
rotateX(90deg)或-90deg，再translateZ - 左右面：先
rotateY(90deg)或-90deg，再translateZ
自动旋转卡顿？检查 will-change 和硬件加速
CSS 3D 动画卡，大概率是没触发 GPU 加速。仅靠 transform 不一定够，尤其在中低端设备或旧版 Safari 上。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
关键不是加得越多越好，而是加在对的地方：
- 给
.cube加will-change: transform，而不是给每个.face - 确保
.cube有transform: translateZ(0)或类似触发层合成的声明（部分浏览器仍需此 hack） - 避免在动画中同时修改
width/height/top/left等触发重排的属性 - Chrome DevTools → Rendering → 勾选 “Paint flashing”，看是否频繁重绘；若面区域闪烁，说明未走 GPU 合成
移动端 touch 拖拽旋转时，transform 累加错乱怎么办
直接用 element.style.transform = 'rotateY('+y+'deg) rotateX('+x+'deg)' 拼接，会导致数值溢出、精度漂移、方向反向——因为每次都是绝对赋值，没考虑上一次状态。
更稳的做法是维护一个累积旋转矩阵或欧拉角变量，再转成 CSS 字符串：
let rotX = 0, rotY = 0;
// touchmove 中：
rotY += deltaX * 0.5; // 小系数防过快
rotX += deltaY * 0.5;
cube.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
注意：不要用 getComputedStyle 解析当前 transform 矩阵再叠加，性能差且在 iOS Safari 上可能返回空字符串或简化值。
另外，记得加 touch-action: none 到 .cube，防止系统手势劫持拖拽事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
