App端（尤其iOS）对transform-style: preserve-3d支持极差，H5和小程序可用的3D翻转在App端易卡死、白屏或仅显示正面；应改用animation+rotateY伪3D方案，并确保perspective设在直接父元素、正反面加backface-visibility: hidden。
uni-app App端transform-style: preserve-3d不生效？
直接说结论：App端（尤其是iOS）对transform-style: preserve-3d支持极差，H5和微信小程序能跑通的3D翻转，在App端大概率卡死、白屏或只显示正面。这不是你CSS写错了，是uni-app编译到App时用的是WKWebView（iOS）或X5内核（Android），底层对3D变换的硬件加速和CSS解析存在严重阉割。
实操建议：
- 别在App端依赖纯CSS 3D翻转做核心交互，尤其避免嵌套多层
transform或配合transition做连续动画 - 用
view组件替代div，并显式加style="backface-visibility: hidden;"——这能缓解部分白屏问题，但不能解决preserve-3d失效 - 检查
uni-app版本，v3.9.12+起对App端transform做了部分兼容补丁，但仅限单层旋转（如卡片正反面切换），不支持透视链式变换
App端实现卡片翻转的可行方案：用animation + rotateY硬切
与其强求3D空间，不如退一步做“伪3D”：用@keyframes定义两个关键帧（0deg → 180deg），控制卡片容器绕Y轴旋转，并手动切换前后两面的z-index和opacity。这个方案在App端稳定，且性能可控。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 翻转后背面文字镜像显示（没加
transform: rotateY(180deg)反向矫正） - Android低端机卡顿（用了
transition: transform 0.6s而非animation，触发重排） - 翻转过程中出现闪屏（没给卡片容器设
perspective: 1000px，或设在了父级以外的节点）
正确做法：
-
perspective必须设在翻转容器的**直接父元素**上，例如：<view class="card-wrapper"><view class="card">...</view></view>，样式写在.card-wrapper - 正反面都加
backface-visibility: hidden，防止翻转中途透出另一面 - 用
animation代替transition，避免触发动态样式计算；示例关键帧：@keyframes flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } }
为什么uni.createSelectorQuery()查不到3D元素尺寸？
因为App端Webview在执行createSelectorQuery时，若目标元素正处于transform动画中（哪怕只是transform: rotateY(0)），其布局信息可能未完成渲染，导致boundingClientRect()返回null或错误宽高。
使用场景：你想根据卡片宽度动态算翻转半径，或做手势拖拽翻转角度。
实操建议：
- 不要在
onReady里立刻查，改用$nextTick或setTimeout(..., 100)延后执行查询 - 避免查带
transform的元素本身，改为查其无样式的子容器（比如包一层view，只负责占位） - 如果必须读取，先临时移除
transform和animation，查完再恢复——但注意这会触发重绘，慎用于高频操作
Android真机上翻转卡顿？检查will-change和translateZ
App端对GPU加速识别不敏感，光靠transform不一定触发硬件渲染。很多开发者以为加了transform: rotateY(0)就自动上GPU，其实不是。
性能影响点：
- 不加
will-change: transform，Android X5内核大概率走CPU绘制，60fps变30fps甚至更低 - 在
rotateY基础上叠加translateZ(0)（哪怕只是translateZ(0.01px)）能强制启用GPU图层，但iOS WKWebView对此无效，反而可能增加内存开销 - 每张卡片都独立开启GPU图层会吃掉大量显存，5张以上翻转卡片在低端Android上容易OOM
建议：
- 只对当前正在交互的卡片加
will-change: transform，交互结束立即移除 - 用
translateZ(0.01px)代替translateZ(0)，规避某些内核对0值的优化误判 - 上线前务必在红米Note 9、vivo Y系列等低端机实测帧率，别信模拟器数据
perspective单位用px还是rem都会影响最终视角畸变程度。动手前先在真机跑个最简翻转demo，比什么都管用。 
