3d transformation on mobile device

Question

I'm trying to add a way to integrate 3d transformations accessing a mobile devices accelerometer into the following javascript. Thank you so much for your help!

$(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

You need the "device orientation" API - the accelerometer data isn't accessible via the mousemove event.