例子：实现3D手机效果
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no , width=device-width , initial-scale=1 , maximum-scale=1">
<style>
div{ -webkit-perspective:250px;}
</style>
</head>
<body>
<div style="text-align:center; padding-top:50px;">
<img src="./images/img_01.png" alt="" id="iphone" width="200" />
</div>
alpha:<span id="alpha"></span><br>
beta:<span id="beta"></span><br>
gamma:<span id="gamma"></span>
<script>
var iphone = document.getElementById('iphone');
window.addEventListener(' deviceorientation',function(e){
document.getElementById('alpha').textContent = e.alpha; //沿z轴旋转的夹角
document.getElementById('beta').textContent = e.beta; //沿x轴旋转的夹角
document.getElementById('gamma').textContent = e.gamma; //沿y轴旋转的夹角
iphone.style.webkitTransform = "rotateZ(" + e.alpha * -1 + "deg) rotateY(" + e.gamma + "deg) rotateX(" + e.beta * -1 + "deg)";
},true);
</script>
</body>
</html>
设备坐标图解：
6776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
