Mobile Safari не показывает CSS-преобразование rotateX и rotateY только rotateZ

Это странно. Я играю с ориентацией устройства, но не могу заставить rotateX и вращаться для работы в 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 Затем попробуйте сохранить его на главный экран.

Любые подсказки? Жук?

    Это ошибка в браузере ios Safari. Чтобы исправить это, окружите поле div другим тегом. Затем переместите css:

     -webkit-perspective: 500px; 

    к содержащему div. Это должно сделать видимым вращающуюся коробку.

    Давайте будем гением компьютера.