CSS3 动画之3D技术在前端的应用基础知识陀螺仪陀螺仪又叫角速度传感器，是不同于加速度计（G-sensor）的，他

基础知识

陀螺仪

陀螺仪又叫角速度传感器，是不同于加速度计（G-sensor）的，他的测量物理量是偏转、倾斜时的转动角速度
在手机上，仅用加速度计没办法测量或重构出完整的3D动作，测不到转动的动作的，G-sensor只能检测轴向的线性动作。但陀螺仪则可以对转动、偏转的动作做很好的测量，这样就可以精确分析判断出使用者的实际动作。而后根据动作，可以对手机做相应的操作！
陀螺仪旋转角度，如下图所示：

beta: 沿x轴转
alpha: 沿z轴转
gamma: 沿y轴转

API

deviceorientation 设备的物理方向信息，表示为一系列本地坐标系的旋角
devicemotion 提供设备的加速信息
compassneedscalibration 用于通知Web站点使用罗盘信息校准上述事件，说白了就是校准指南针

获取旋转角度

window.addEventListener('deviceorientation', event => {
  // 处理event.alpha、event.beta及event.gamma
}, false);

获取罗盘校准

window.addEventListener('compassneedscalibration', event => {
  alert('您的罗盘需要校准');
  event.preventDefault();
}, false);

获取重力加速度

window.addEventListener('devicemotion', event => {
  // event.acceleration：x(y,z)，设备在x(y,z)方向上的移动加速度值
  // event.accelerationIncludingGravity：带上了重力加速度后的值 x(y,z)
  // event.rotationRate：alpha,beta,gamma: 手机运动中，设备绕x,y,z轴旋转的角度，扔一下手机，哈哈
}, false);

摇一摇简单实现

const speed = 30;
let x = y = z = lastX = lastY = lastZ = 0;

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
}

function。deviceMotionHandler(event) {
  const { x: _x, y: _y, z: _z } = event.accelerationIncludingGravity;
  x = _x;
  y = _y;
  z = _z;
  if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
    // 触发xxx
  }
}

完整代码

touch 事件

详解

touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
touchmove：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动
touchend：当手指从屏幕上离开的时候触发。
touchcancel：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了

function load (){  
   
    document.addEventListener('touchstart',touch, false);  
    document.addEventListener('touchmove',touch, false);  
    document.addEventListener('touchend',touch, false);  
       
    function touch (event){  
        var event = event || window.event;  
           
        var oInp = document.getElementById("inp");  
   
        switch(event.type){  
            case "touchstart":  
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
            case "touchend":  
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";  
                break;  
            case "touchmove":  
                event.preventDefault();  
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
        }  
           
    }  
}  
window.addEventListener('load',load, false);