Question

这很奇怪。我正在使用设备方向，但似乎无法使用rotateX和rotateY在Safari（iOS 8.0.2）中工作。

但是！如果我使用具有apple-web-app功能的元标记将其保存到我的主屏幕，它可以正常工作。

这是我的剧本：

$( 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 然后尝试将其保存到主屏幕。

任何线索？一个bug？

Answer 1

这是ios Safari浏览器中的一个错误。要解决此问题，请使用另一个标记包围div div。然后移动css：

-webkit-perspective: 500px;

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

Mobile Safari没有显示CSS变换rotateX和rotateY只旋转Z

1 个答案: