DeviceOrientation

DeviceOrientation

HTML

<script src="https://cdn.firebase.com/js/client/1.1.2/firebase.js"></script>
<div class="pointer 3dable">
    <h1>&#x25B2;</h1>
    <h2>@insertcoffee</h2>
</div>
<p class="alpha"></p>
<p class="beta"></p>
<p class="gamma"></p>

CSS

html, body { width: 100%; height: 100%; margin: 0, padding: 0; }
body { background: black; }
p { font-size: 9px; font-family: sans; color: white; display:none; }  
.pointer {
    
/*     height: 0;
    width: 0;
    border-left: 6em solid transparent;
    border-right: 6em solid transparent;
    border-bottom: 24em solid white;
    margin: -10px 0 0 -40px;
    top: 20%;
    left: 45%;
    position: absolute; */
    margin: 0;
    padding: 0;
    display: block;
    width: 300px;
    height: 300px;
    border: solid 1px white;
    color: white;
    text-align: center;
    overflow: hidden;
  }
  .pointer h1 {
    font-size: 300px;
    margin: 0;
    padding: 0;
    margin-top: -35px;
  }
  .pointer h2 {
    font-family: sans;
    font-size: 20px;
    margin: 0;
    padding: 0;
    margin-top: -60px;
  }
  .n {
    top: 20%;
    left:50%;
    position:absolute;
    font:5em Helvetica;
    margin: 0 0 0 -40px;
  }

JavaScript

$(document).ready(function() {
    
    var id = Math.round( Math.random() * 100000 );
    var fb = new Firebase("https://device-orientation.firebaseio.com/");
    
    var rotate = function (orientation) {

        $(".alpha").text( 'alpha ' + orientation.alpha );
        $(".beta").text( 'beta ' + orientation.beta );
        $(".gamma").text( 'gamma ' + orientation.gamma );
        
    $(".3dable").css({
        transform:
           "rotateY(" + Math.round( -orientation.gamma ) + "deg) " +
            "rotateX(" + Math.round( orientation.beta ) + "deg) " +
            "rotateZ(" + Math.round( orientation.alpha + 180 ) + "deg)"
    });
        
  };
    
  fb.child('test').on("value", function(snapshot) {
    var orientation = snapshot.val();
    rotate( orientation );
  });
  
  // send data to firebase
  if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function (e) {  
    alert("test")
      fb.child('test').set({
        absolute: e.absolute,
        alpha: e.alpha,
        beta: e.beta,
        gamma: e.gamma,
        timeStamp: e.timeStamp,
        type: e.type
      });
    }, false);
  }
});