rotate su dispositivi mobili

[alex-13]

Ciao a tutti.
Devo implementare la rotazione di un immagine anche su dispositivi mobili. Attualmente se ci posiziono il mouse sopra l'immagine simula una rotazione 3d ma su dispositivi mobili non accade niente.
Ho visto che devo aggiungerci:
if(window.DeviceMotion) { //Do something }
Ma non capisco come implementarlo.
Qualcuno ha idee?
Grazie

[CODE]'use strict';

$(document).on('mousemove', function (e) {
$('.light').css({
left: e.pageX - 300,
top: e.pageY - 300
});
});


var el = $('.js-tilt-container');


el.on('mousemove', function (e) {
var _$$offset = $(this).offset();


var left = _$$offset.left;
var top = _$$offset.top;


var cursPosX = e.pageX - left;
var cursPosY = e.pageY - top;
var cursFromCenterX = $(this).width() / 2 - cursPosX;
var cursFromCenterY = $(this).height() / 2 - cursPosY;


$(this).css('transform', 'perspective(500px) rotateX(' + cursFromCenterY / -40 + 'deg) rotateY(' + -(cursFromCenterX / -40) + 'deg) translateZ(-45px)');


var invertedX = Math.sign(cursFromCenterX) > 0 ? -Math.abs(cursFromCenterX) : Math.abs(cursFromCenterX);


//Parallax transform on image
$(this).find('.js-perspective-neg').css('transform', 'translateY(' + cursFromCenterY / 10 + 'px) translateX(' + -(invertedX / 10) + 'px) scale(1.15)');


$(this).removeClass('leave');
});


el.on('mouseleave', function () {
$(this).addClass('leave');
});

[cavicchiandrea]

Credo che per progetti mobile si usi jQueryMobile e qui mi fermo perché non lo conosco e non l'ho mai usato

[alex-13]

Da quello che ho letto in giro dovrei usare questo ma non riesco a implementarlo nel mio codice. Proposte?
Grazie

if (!('ondeviceorientation' in window)) {            document.getElementById('do-unsupported').classList.remove('hidden');
         } else {
            document.getElementById('do-info').classList.remove('hidden');


            window.addEventListener('deviceorientation', function(event) {
               document.getElementById('cube').style.webkitTransform =
               document.getElementById('cube').style.transform =
                       'rotateX(' + event.beta + 'deg) ' +
                       'rotateY(' + event.gamma + 'deg) ' +
                       'rotateZ(' + event.alpha + 'deg)';


               document.getElementById('beta').innerHTML = Math.round(event.beta);
               document.getElementById('gamma').innerHTML = Math.round(event.gamma);
               document.getElementById('alpha').innerHTML = Math.round(event.alpha);
               document.getElementById('is-absolute').innerHTML = event.absolute ? "true" : "false";
            });
         }