Css3D应用-陀螺仪

一、 陀螺仪角度

X（beta,作用域为-180, 180）
y（gamma，作用域为-90， 90）
z（alpha，作用域为0, 360）

1. deviceorientation
设备的物理方向信息，表示为一系列本地坐标系的旋角。
(获取旋转角度)

window.addEventListener("deviceorientation", function(event){
   // 处理 event.alpha、event.beta、event.gamma
}, true);

2. devicemotion
提供设备的加速信息。
（获取重力加速度）

window.addEventListener("devicemotion", function(event){
   // 处理event.acceleration
   // x(y,z): 设备在x(y,z)方向上的移动加速度值
   // event.accelerationIncludingGravity
   // 考虑了重力加速度后设备在x(y,z)
   // event.rotationRate
   // alpha, beta, gamma: 设备绕x，y，z轴旋转的角度
}, true);

3. compassneedscalibration
用于通知web站点使用罗盘信息校准上述事件。
（获取罗盘校准）

window.addEventListener("compassneedscalibration", function(event){
   alert('您的罗盘需要校准');
   event.preventDefault();
}, true);

简单的摇一摇触发代码

var speed = 30; // speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
   var acceleration = event.accelerationIncludingGravity;
   x = acceleration.x;
   y = acceleration.y;
   z = acceleration.z;

   //记录上一次设备在x,y,z方向上的加速度
   if ((!lastX) && (!lastY) && (!lastZ)) {
      lastX = acceleration.x;
      lastY = acceleration.y;
      lastZ = acceleration.z;
      return;
   }

   if (Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed ){
      // 简单摇一摇触发代码
      alert(1);
   }
}

二、 Touch事件

最基本的touch事件包括4个事件：
touchstart: 当在屏幕上按下手指时触发
touchmove: 当在屏幕上移动手指时触发
touchend: 当在屏幕上抬起手指时触发
touchcancel:
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

三、 Css核心技巧

1、 布局方式
圣杯布局，双飞翼布局，绝对定位布局，flex布局
（圣杯，双飞翼为了兼容早期的ie浏览器，兼容性最好）

2、 引用neat.css 处理一些兼容性问题
3、 Cssicon 图标

四、 css3D转换 transform

上面的translateZ, 当translateZ为正值的时候，元素会向其面对的方向走去；如果元素无旋转，就会朝显示器走来！！
r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

赏

谢谢你请我吃糖果

微信