uni-app中css 3d变换在安卓真机和微信小程序中普遍失效，需用scale+skew模拟透视或canvas手动绘制实现跨端稳定效果。
uni-app里transform: perspective()基本不可用
直接写perspective: 1000px或transform: perspective(1000px) rotateX(30deg)在大部分安卓真机上会被忽略，H5端表现尚可，但微信小程序里连transform-style: preserve-3d都不被识别。这不是你代码写错，是底层WebView对CSS 3D的支持断层导致的。
真正能稳定生效的“透视感”，靠的是视觉欺骗：用scaleX/scaleY + skewX/skewY模拟斜切压缩，再配合渐变遮罩强化纵深错觉。比如让图片顶部窄、底部宽，就加transform: scaleY(0.95) skewY(-3deg)，比硬上perspective更可控。
Android真机上rotateX/rotateY会白屏或卡死
哪怕只对单张图片加transform: rotateX(20deg)，部分中低端安卓机型（尤其是OPPO、vivo的旧系统WebView）会触发渲染管线崩溃，表现为整个容器空白或闪烁后回退到初始状态。iOS和H5端相对稳定，但微信小程序里rotateX根本不会生效。
- 必须显式加
transform: translateZ(0)或will-change: transform才能触发硬件加速，否则纯软件渲染必卡 -
backface-visibility: hidden在安卓上常被无视，不能依赖它隐藏背面元素 - 动画时长别设低于
300ms，否则帧率掉到20fps以下，用户感知就是“顿”
替代方案：用两层图片+偏移模拟透视深度
想让一张商品图看起来“立起来”，比折腾CSS 3D更靠谱的做法是：底层放原图，上层盖一个轻微缩放+错位的副本，再用linear-gradient从上到下叠加半透明黑，制造阴影和景深感。
关键点：
- 两层图片都用
position: absolute，避免flex或scale干扰坐标计算 - 上层图片
transform: scale(0.98) translateY(-4px)，模拟近大远小 - 遮罩层用
background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.15))，不透明度控制在0.1~0.2之间，太重会像蒙灰 - 所有图片
mode="aspectFill"，否则缩放后边缘拉伸变形
需要精确3D交互？直接放弃CSS，改用canvas绘制
如果业务强依赖旋转角度读取、多面体投影或动态视角切换（比如AR商品预览），CSS方案已到极限。此时应切到canvas，用ctx.setTransform()手动计算矩阵，虽然开发成本高，但跨端一致性好。
注意避坑：
- 先调
uni.getSystemInfoSync().pixelRatio拿到设备dpr，所有坐标和尺寸都要×dpr - 不要用
image.onload，改用uni.getImageInfo确保图片加载完成再绘 - 安卓端
ctx.drawImage不支持九宫格参数，得自己切图再拼
真正的透视变换不是加个CSS属性就能搞定的事，它卡在渲染引擎能力边界上。能用视觉模拟解决的，就别硬刚3D；非要3D的，就得接受canvas的开发成本和性能折损。
