script.js

var winH = 0, winW = 0, viewport, pers = 700, backwall;

window.onload = function(){
  winH = window.innerHeight;
  winW = window.innerWidth;
  viewport = document.getElementById("viewport");
  backwall = document.getElementById("backwall");
  repositionBackface();
};
window.onresize = function(){
  winH = window.innerHeight;
  winW = window.innerWidth;
  repositionBackface();
};

window.onmousemove = function(e){
  var x = e.clientX;
  var y = e.clientY;
  var finalW = (+x / +winW) * 100;
  var finalH = (+y / +winH) * 100;
  updatePerspective(finalW,finalH);
};

window.addEventListener("touchstart", handleTouch, false);

function handleTouch(e){
  e.preventDefault();
}

window.onmousewheel = function(e){
  var offset = 25;
  pers = pers + ((e.wheelDelta / 120) * offset);
  viewport.style.perspective = pers + "px";
  viewport.style.webkitPerspective = pers + "px";
};

function repositionBackface(){
  var x = 0;
  if(winW < winH){
    x = winW;
  } else {
    x = winH;
  }
  backwall.style.transform = "translateZ(-" + (x - 1) + "px)";
  backwall.style.webkitTransform = "translateZ(-" + (x - 1) + "px)";
}

function updatePerspective(originX,originY){
  viewport.style.perspectiveOrigin = originX.toFixed(4) + "% " + originY.toFixed(4) + "%";
  viewport.style.webkitPerspectiveOrigin = originX.toFixed(4) + "% " + originY.toFixed(4) + "%";
}

window.addEventListener("deviceorientation", handleMotion,true);

function handleMotion(e){
  var x = normalizeResults(-90,90,e.gamma);  // In degrees [-180,180]
  var y = normalizeResults(-180,180,e.beta); // In degrees [-90,90]
  var finalW = +x * 100;
  var finalH = +y * 100;
  updatePerspective(finalW,finalH);
}

function normalizeResults(start,end,input){
  return (input-start)/(end-start);
}