小编Fri*_*kas的帖子

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

这很奇怪.我正在玩设备方向,但似乎无法使用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)"; 
}
});
Run Code Online (Sandbox Code Playgroud)

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

有线索吗?一个bug?

css iphone device-orientation ios webkit-transform

6
推荐指数
1
解决办法
1765
查看次数

标签 统计

css ×1

device-orientation ×1

ios ×1

iphone ×1

webkit-transform ×1