3d css 转换（translateZ）在 android 4.0.3 上不起作用？答案

【问题标题】：3d css transform (translateZ) not working on android 4.0.3?3d css 转换（translateZ）在 android 4.0.3 上不起作用？
【发布时间】：2012-09-12 11:29:54
【问题描述】：

我有这个在 Chrome、Safari 和 Mobile Safari 上运行良好的 html。

<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div style="position:relative;-webkit-perspective:1000;width:300px;height:50px">
<div style="position:relative;width:300px;height:50px;-webkit-transform-origin:0px 25px 0px;-webkit-transform-style:preserve-3d;">
<div style="position:absolute;width:300px;height:50px;-webkit-transform:translateZ(125px);background-image:url(http://i855.photobucket.com/albums/ab119/ansherina6/banner2-1.png)"></div>
</div></div>
</body></html>

在 android 4.0.3 上，translateZ 没有在 div 上显示任何（期望的）效果。除了 translateZ，其他一切都运行良好。如果我使用 translate3D(a,b,c) 那么只有 X 和 Y 值会影响渲染。有什么解决方法吗？

【问题讨论】：

你有没有遇到这个问题？我也面临同样的问题。

标签： android css 3d webkit transform

【解决方案1】：

根据caniuse，android 4 及更高版本支持翻译。但是，我有一种预感，更具体的 3D 转换（如 z 轴上的平移）不会获得如此广泛的支持，尤其是在不支持 webgl 的浏览器中。如果关键，我认为有一个后备：transformie

【讨论】：