Question

我有这个HTML，可以在Chrome，Safari和Mobile Safari上正常使用。

<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值会影响渲染。这有什么解决方法吗？

Answer 1

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

3d css转换（translateZ）无法在android 4.0.3上运行？

1 个答案: