​

设备动作和方向事件可访问移动设备上的内置加速度计、陀螺仪和罗盘

Alpha 围绕 Z 轴的旋转

Beta 围绕 X 轴的旋转

Gamma 围绕 Y 轴的旋转

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#ff4081">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="/manifest.json">
<title>Ajanuw</title>
<style>
#img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transition: transform 1;
width: 120px;
height: 120px;
background-image: url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=);
background-image: image-set(
url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,
url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x
      );
background-image: -webkit-image-set(
url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,
url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x
      );
    }
</style>
</head>

<body>
<div id="doeSupported"></div>
<div id="doc"></div>
<div id="img"></div>
<script type="text/javascript">
let w =  window.innerWidth;
let h =  window.innerHeight;

let ww = w / 170;
let hh = h / 90;
function set2(num){
if(num){
return num.toFixed(2);
      }
return null;
    }
function deviceOrientationHandler(e) {
console.log( e);
var doc = `
Z 轴的旋转 => ${set2(e.alpha)};<br/>
X 轴的旋转 => ${set2(e.beta)};<br/>
Y 轴的旋转 => ${set2(e.gamma)};<br/>
`;
document.getElementById("doc").innerHTML = doc;
update(e.beta, e.gamma, e.alpha);
    }
function update(x,y,z){
document.getElementById("img")
      .style.transform = `translate(${(y*ww)-60}px, ${(x*hh)-60}px) rotate(${z - 90}deg)`;
    }

if (window.DeviceOrientationEvent) { // 设备方向
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById("doeSupported").innerText = "Supported!";
    }

function deviceMotionHandler(e) {
console.log( e.acceleration);// 加速度
    }

if(window.DeviceMotionEvent){ // 设备动作
window.addEventListener('devicemotion', deviceMotionHandler);
    }
</script>
</body>

</html>