deviceorientation感知设备倾斜变换

最新推荐文章于 2024-01-24 20:49:31 发布

kongjunchao159

最新推荐文章于 2024-01-24 20:49:31 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/kongjunchao159/article/details/47399443

HTML5 专栏收录该内容

19 篇文章

订阅专栏

例子：实现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>

设备坐标图解：