Untitled

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    body {
      font-family: sans-serif;
    }

      .main {
      border: 1px solid black;
      box-shadow: 10px 10px 5px #888;
      border-radius: 12px;
      padding: 20px;
      background-color: #ddd;
      margin: 25px;
      width: 450px;
      margin-left:auto;
      margin-right:auto;
    }

    .logo {
      width:275px;
      margin-left: auto;
      margin-right: auto;
      display: block;
      padding: 15px;
    }

    .container {
      -webkit-perspective: 300; perspective: 300;
    }
  </style>

</head>
<body>
  <div class="main">
      <h2>Device Orientation</h2>
      <table>
        <tr>
          <td>Event Supported</td>
          <td id="doEvent"></td>
        </tr>
        <tr>
          <td>Tilt Left/Right [gamma]</td>
          <td id="doTiltLR"></td>
        </tr>
        <tr>
          <td>Tilt Front/Back [beta]</td>
          <td id="doTiltFB"></td>
        </tr>
        <tr>
          <td>Direction [alpha]</td>
          <td id="doDirection"></td>
        </tr>
        <tr>
          <td>Acceleration</td>
          <td id="acceleration"></td>
        </tr>
      </table>
  </div>

  <div class="container" style="-webkit-perspective: 300; perspective: 300;">
    <img src="html5_logo.png" id="imgLogo" class="logo">
  </div>

  <script type="text/javascript">
    init();
    var count = 0;

    function init() {
      if (window.DeviceOrientationEvent) {
        document.getElementById("doEvent").innerHTML = "DeviceOrientation";
        // Listen for the deviceorientation event and handle the raw data
        window.addEventListener('deviceorientation', function(eventData) {
          // gamma is the left-to-right tilt in degrees, where right is positive
          var tiltLR = eventData.gamma;

          // beta is the front-to-back tilt in degrees, where front is positive
          var tiltFB = eventData.beta;

          // alpha is the compass direction the device is facing in degrees
          var dir = eventData.alpha

          // call our orientation event handler
          deviceOrientationHandler(tiltLR, tiltFB, dir);
          }, false);
      } else {
        document.getElementById("doEvent").innerHTML = "Not supported on your device or browser.  Sorry."
      }
    }


    // Reference page elements for dropping current device acceleration values into
var accElem = document.getElementById('acceleration'),
 accGravityElem = document.getElementById('acceleration-gravity'),

  // Define an event handler function for processing the device’s acceleration values

      handleDeviceMotionEvent = function(e) {

          // Get the current acceleration values in 3 axes and find the greatest of these

          var acc = e.acceleration,
              maxAcc = Math.max(acc.x, acc.y, acc.z),

          // Get the acceleration values including gravity and find the greatest of these

              accGravity = e.accelerationIncludingGravity,
              maxAccGravity = Math.max(accGravity.x, accGravity.y, accGravity.z);

          // Output to the user the greatest current acceleration value in any axis, as
          // well as the greatest value in any axis including the effect of gravity

          accElem.innerHTML = 'Current acceleration: ' + maxAcc +  'm/s^2';
          accGravityElem.innerHTML = 'Value incl. gravity: ' + maxAccGravity + 'm/s^2';
      };

  // Assign the event handler function to execute when the device is moving

  window.addEventListener('devicemotion', handleDeviceMotionEvent, false);

    function deviceOrientationHandler(tiltLR, tiltFB, dir) {
      document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);
      document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);
      document.getElementById("doDirection").innerHTML = Math.round(dir);
      document.getElementById("acceleration").innerHTML = Math.max()

      // Apply the transform to the image
      var logo = document.getElementById("imgLogo");
      logo.style.webkitTransform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
      logo.style.MozTransform = "rotate("+ tiltLR +"deg)";
      logo.style.transform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
    }


    // Some other fun rotations to try...
    //var rotation = "rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
    //var rotation = "rotate("+ tiltLR +"deg) rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
  </script>


</body>
</html>