js/main.js

   1 function deviceOrientationEvents() {
   2         var alphaElem = document.getElementById("alpha");
   3         var betaElem =document.getElementById("beta");
   4         var gammaElem = document.getElementById("gamma");
   5         var logoImg = document.getElementById("logo");
   6         var rotateY = 0, rotateX = 0;
   7
   8         window.addEventListener("deviceorientation", handleDeviceOrientation, false);
   9
  10         function handleDeviceOrientation(e) {
  11                 rotateX = ('rotateX(' + e.beta * 1.2 + 'deg)')
  12                 rotateY = ('rotateY(' + e.gamma * 1.2 + 'deg)')
  13
  14                 //Style insert
  15                 logoImg.style.webkitTransform = rotateY + ' ' + rotateX
  16
  17                 alphaElem.innerHTML ="alpha value "+ Math.round(e.alpha);
  18                 betaElem.innerHTML = "beta value "+ Math.round(e.beta);
  19                 gammaElem.innerHTML = "gamma value "+ Math.round(e.gamma);
  20         }
  21 }
  22
  23 window.onload = function() {deviceOrientationEvents();};