css3 transform + deviceorientation實現圖片旋轉效果

1. 陀螺儀deviceorientation的使用，參考《關於陀螺儀deviceorientation》https://segmentfault.com/a/1190000007183883 。

2. transform各屬性的具體使用，參考《深入理解CSS變形transform(3d)》https://www.cnblogs.com/xiaohuochai/p/5351477.html 。

3. 代碼實現在規定Safari橫屏的前提下，圖片相對觀察點旋轉的效果。

var x = 0,y = 0,rotateRes = ""; //橫屏時X軸與gamma對應,Y軸與beta對應,
var oriB = 0, oriG = window.orientation>0 ? -45 : 45; //橫屏時orientation=90/-90,根據方向設定原始original gamma
var lastB = 0 , lastG = oriG; //上一次記錄的beta[-180,180)/gamma[-90,90)
var curB = 0, curG = oriG;//當前的current beta/gamma

if (window.DeviceOrientationEvent) {  //判斷當前設備是否支持事件 
  window.addEventListener("deviceorientation", orientationHandler, false);  
  function orientationHandler(event) {    
    curG = Math.round(event.gamma);   
    curB = Math.round(event.beta); 
    if(Math.abs(curB-oriB)<60) {  //只在允許的範圍內進行旋轉
      if(Math.abs(curG-oriG)<60 && Math.abs(curG-lastG) < 100 ) { //與初始平面不超過60度，且不過分界點才旋轉
        x += curG-lastG;  //若希望圖片反向旋轉，可改為 x -= ...
        lastG = curG;  
      }
    }
    if(Math.abs(curB-oriB)<60 && Math.abs(curB-lastB) < 200 ) { 
      y += curB-lastB; 
      lastB = curB;  
  }

    rotateRes = "perspective(1200px) rotateX(" + x +"deg) rotateY("+ y +"deg)"; //perspective為視距，即人眼到屏幕的距離   
    $("#rotate-image").css({transform:rotateRes,'-webkit-transform':rotateRes});
  }  
}
else {
  console.log("對不起，您的設備還不支持Device Orientation!!!");
}