移动设备上的 3d 转换

Question

我正在尝试添加一种方法来将访问移动设备加速度计的 3d 转换集成到以下 javascript 中。非常感谢您的帮助！

$(document).mousemove(rotateScene);
});

function rotateScene(e) {
var horizontal = e.pageX / $(document).width();
var vertical = e.pageY / $(document).height();

$('.test').css({
    '-webkit-transform': 'rotateX(' + (7 - (vertical * 14)) + 'deg)     rotateY(' + (-10 + (horizontal * 20)) + 'deg)',
    '-moz-transform': 'rotateX(' + (7 - (vertical * 14)) + 'deg) rotateY(' + (-10 + (horizontal * 20)) + 'deg)',
    '-ms-transform': 'rotateX(' + (7 - (vertical * 14)) + 'deg) rotateY(' + (-10 + (horizontal * 20)) + 'deg)',
    '-o-transform': 'rotateX(' + (7 - (vertical * 14)) + 'deg) rotateY(' + (-10 + (horizontal * 20)) + 'deg)',
    'transform': 'rotateX(' + (7 - (vertical * 14)) + 'deg) rotateY(' + (-10 + (horizontal * 20)) + 'deg)'
});

}

Answer 1

您需要 "device orientation" API - 无法通过 mousemove 事件访问加速度计数据。

移动设备上的 3d 转换

3d transformation on mobile device

javascript

css

mobile

accelerometer