監聽deviceorientation

window.addEventListener('deviceorientation', function(event) {
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;
}, false);

HTML

alpha:<span id="alpha"></span><br/>
beta:<span id="beta"></span><br/>
gamma:<span id="gamma"></span><br/>
 

JS

if(window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(event) {
  var a = document.getElementById('alpha',
          b = document.getElementById('beta'),
          g = document.getElementById('gamma'),
          alpha = event.alpha,
          beta = event.beta,
              gamma = event.gamma;

  a.innerHTML = Math.round(alpha);
  b.innerHTML = Math.round(beta);
  g.innerHTML = Math.round(gamma);

    }, false);
}else{
    document.querySelector('body').innerHTML = '你的瀏覽器不支援喔';
}
 

CSS 3D 的應用 HTML

<div class="camera">
    <div class="space">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>
</div>
 

JS

var space = document.querySelectorAll('.space');
if(window.DeviceOrientationEvent) {

  window.addEventListener('deviceorientation', function(event) {
  var alpha = event.alpha,
      beta = event.beta,
     gamma = event.gamma;

    space[0].style.webkitTransform = 'rotateX('+beta+'deg) rotateY('+gamma+'deg) rotateZ('+alpha+'deg)';
    space[0].style.transform = 'rotateX('+beta+'deg) rotateY('+gamma+'deg) rotateZ('+alpha+'deg)';
    space[0].style.mozTransform = 'rotateX('+beta+'deg) rotateY('+gamma+'deg) rotateZ('+alpha+'deg)';

      }, false);
}else{
  document.querySelector('body').innerHTML = '你的瀏覽器不支援喔';
}

手機網頁指南針的應用

<div id="compass"></div>

css

#compass{
  margin:0 auto;
  width:90%;
  background-image:url(compass.jpg);
  background-size:cover;
  transform-origin:center center;
  -moz-transform-origin:center center;
  -webkit-transform-origin:center center;
}

JS

var compass = document.getElementById('compass'),
    w = compass.offsetWidth;

compass.style.height = w +'px';

if(window.DeviceOrientationEvent) {

  window.addEventListener('deviceorientation', function(event) {
        var alpha;
        //     判斷是否為 iOS 裝置
        if(event.webkitCompassHeading) {
          alpha = event.webkitCompassHeading; // iOS 裝置必須使用 event.webkitCompassHeading
          compass.style.WebkitTransform = 'rotate(-' + alpha + 'deg)';
          show.innerHTML = alpha;
        }
        else {
          alpha = event.alpha;
          webkitAlpha = alpha;
          if(!window.chrome) {
            webkitAlpha = alpha-270;
          }
        }

        compass.style.Transform = 'rotate(' + alpha + 'deg)';
        compass.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)';
        compass.style.MozTransform = 'rotate(-' + alpha + 'deg)'; 
      }, false);
}else{
  document.querySelector('body').innerHTML = '你的瀏覽器不支援喔';
}