ios - Mobile Safari 不显示 CSS 变换 rotateX 和 rotateY 仅 rotateZ

Question

这很奇怪。我正在玩设备方向，但似乎无法让 rotateX 和 rotateY 在 Safari (iOS 8.0.2) 中工作。

但是!如果我使用 apple-web-app-capable 元标记将它保存到我的主屏幕，它就可以正常工作。

这是我的脚本:

$( document ).ready(function() {
window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(e) {
  var alpha    = e.alpha;
  var beta     = e.beta;
  var gamma    = e.gamma;
  $('#z').val(Math.round(alpha)); // Z
  $('#x').val(Math.round(beta)); //  X
  $('#y').val(Math.round(gamma)); // Y
  document.getElementById("box").style.webkitTransform="rotateZ("+Math.round(-alpha)+"deg) rotateX("+Math.round(beta)+"deg) rotateY("+Math.round(-gamma)+"deg)"; 
}
});

您可以在这里(在您的 iPhone 上)实时看到它:http://kohlin.net/matte/orientation.html然后尝试将其保存到您的主屏幕。

有什么线索吗？错误？

Answer 1

这是 ios Safari 浏览器中的错误。要解决此问题，请用另一个标签包围盒子 div。然后移动CSS:

-webkit-perspective: 500px;

到包含的 div。这应该使旋转框可见。