uni-app微信小程序中无法直接用css 3d实现图片翻转，因webview禁用transform-style: preserve-3d和backface-visibility，需改用xr-frame框架：将图片作为纹理贴至xr-meshnode平面模型，通过rotation属性或setrotation api控制绕y轴翻转，并启用side="double"支持双面渲染。
uni-app 本身不支持 CSS 3D 变换在所有小程序平台生效，尤其是微信小程序中 transform-style: preserve-3d 和 backface-visibility 基本被禁用或降级处理，直接写 CSS 3D 翻转（如 rotateY(180deg)）在真机上大概率失效或闪烁。必须绕过 WebView 渲染限制，改用微信原生 3D 框架 XR-Frame 实现可靠翻转。
为什么不能直接用 CSS 3D 做图片翻转
微信小程序的 view 组件不支持真正的层叠上下文 3D 空间，transform 在 canvas 或 web-view 外的普通节点中会被强制拍平为 2D。即使 DOM 结构正确、样式写全，真机调试时也会发现：
-
rotateX/rotateY动画卡顿或完全不动 - 翻转后背面内容不可见（
backface-visibility: hidden无效） - H5 端能跑，但微信小程序端白屏或报
Invalid transform
用 XR-Frame 实现带纹理的平面翻转（gltf + 自定义材质）
XR-Frame 支持加载带双面材质的平面模型，并通过 rotation 属性驱动翻转。关键不是“图片”，而是把图片作为纹理贴到一个 xr-plane 或 xr-meshnode 上，再控制其旋转。
- 图片需先转成 base64 或上传为 CDN 地址，用于
material的u_baseTexture - 必须使用
xr-meshnode+geometry="plane"，不能用xr-image（它不支持 3D 旋转） - 翻转角度要用
rotation属性，单位是弧度，例如rotation="0 3.14159 0"表示绕 Y 轴翻转 180° - 要启用双面渲染：在
material中加side="double"，否则背面会透黑
示例片段（放在 xr-gltf/index.wxml 中）：
<xr-scene><xr-meshnode id="flip-card" position="0 0 0" rotation="0 {{flipAngle}} 0" geometry="plane" width="2" height="3" material="u_baseTexture:url(https://xxx.png);side:double;"></xr-meshnode><xr-light type="ambient" intensity="1.2"></xr-light><xr-camera camera-orbit-control target="flip-card"></xr-camera></xr-scene>
uni-app 中如何动态控制翻转角度
XR-Frame 的属性绑定只支持简单字符串插值（{{}}），不支持响应式数据监听。所以不能直接靠 v-model 或 watch 驱动 rotation；必须调用 XR-Frame 提供的 API 手动更新节点。
- 在
index.js中用XRFrame.getNodeById('flip-card')获取节点实例 - 通过
node.setRotation([0, angleRad, 0])设置旋转（注意单位是弧度，不是 deg） - 触发时机建议放在
onReady后延时 100ms，避免节点未挂载就操作 - 若需动画效果，不要用
setInterval，应使用XRFrame.requestAnimationFrame，否则掉帧严重
简写逻辑：
export default {
onReady() {
setTimeout(() => {
const node = XRFrame.getNodeById('flip-card')
if (node) {
node.setRotation([0, Math.PI, 0]) // 翻转 180°
}
}, 100)
}
}
容易忽略的兼容性细节
XR-Frame 对基础环境有硬性要求，漏掉任一环节都会导致 XRFrame is not defined 或空白场景：
- uni-app 项目必须用
vue2创建（vue3下XRFrame全局对象不会注入） -
manifest.json中usingComponents必须包含{"xr-scene": "/wxcomponents/xr-frame/index"} -
lazyCodeLoading必须设为"requiredComponents"，否则组件不预加载 -
wxcomponents/xr-frame/目录必须从微信官方 GitHub 下载完整包，不能只复制 .wxml - 图片纹理尺寸强烈建议为 2 的整数次幂（如 512×512），否则部分安卓机型会贴图错乱
真机测试前，务必打开微信开发者工具的「增强编译」并勾选「使用新的编译器」，否则 xr-* 标签直接被忽略。
