logo标签列表

3D CSS变换（translateZ）在Android 4.0.3上无法正常工作？

androidcss3dwebkittransform
4

I have this html which works fine on Chrome, Safari and 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值会影响渲染。有没有解决这个问题的方法？
1
你解决了这个问题吗？我也遇到了同样的问题。 - richardtz
1个回答
0

根据caniuse的数据，翻译在Android 4及以上版本中得到支持。然而，我有一种预感，更具体的3D变换，比如沿z轴的平移，在不支持WebGL的浏览器中可能没有那么广泛的支持。如果关键时刻需要，我认为可以使用备用方案：transformie。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接