title: Mousemove on mobile devices
body: <p>I have to implement the rotation of an image even on mobile devices. Currently if we place the mouse on the image simulates a 3D rotation but on mobile devices nothing happens.
  I saw that I have to add:
  if (window.DeviceMotion) {// Do something}
  But I do not understand how to implement it.
  Does anyone have any ideas?
  Thank you</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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) &gt; 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');
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>OK thanks. I've tried setting the "deviceorientation" code in various ways but it does not work. I used these variables. How could I integrate them in my code? thank you</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   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";
              });
           }</code></pre>
  </div>
  </div>
  </p>