本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
前面一篇文章中《Pointer Lock API大全》，我们介绍了Pointer Lock API的相关属性，事件和方法，本文将结合一个例子来给大家带来一个案例实战。
打开本实例，默认进去会看到一个相貌平平的女生，然后点击这张图片：
点击图片触发Pointer Lock，此时鼠标会立即消失，同时图片就会根据你的鼠标位置开始翻江倒海。
而且鼠标的活动范围似乎没有边界，即使移动了一万个屏幕的宽度，我们的图片依然翻转个不停。这就是Pointer Lock API的特性表现。
相关代码如下：
CSS代码：
.box {
line-height: 400px;
text-align: center;
position: relative;
perspective: 200px;
}
.box img {
vertical-align: middle;
}
//www.xttblog.com
HTML代码：
<div class="box">
<img id="image" src="mm1.jpg">
<!-- 业余草：www.xttblog.com -->
</div>
JS代码：
var eleImage = document.getElementById('image');
if (eleImage) {
// 起始值
var moveX = 0, moveY = 0;
// 图片无限变换的方法
var rotate3D = function (event) {
moveX = moveX + event.movementX;
moveY = moveY + event.movementY;
eleImage.style.transform = 'rotateX(' + moveY + 'deg) rotateY(' + moveX + 'deg)';
};
// 业余草：www.xttblog.com
// 触发鼠标锁定
eleImage.addEventListener('click', function () {
eleImage.requestPointerLock();
});
// 业余草：www.xttblog.com
// 再次点击页面，取消鼠标锁定处理
document.addEventListener('click', function () {
if (document.pointerLockElement == eleImage) {
document.exitPointerLock();
}
});
// 业余草：www.xttblog.com
// 检测鼠标锁定状态变化
document.addEventListener('pointerlockchange', function () {
if (document.pointerLockElement == eleImage) {
document.addEventListener("mousemove", rotate3D, false);
} else {
document.removeEventListener("mousemove", rotate3D, false);
}
}, false);
}
其中，应用了除了pointerlockerror事件外的其他所有属性和方法（见红色高亮）。
实现原理
点击图片，执行eleImage.requestPointerLock()让页面进入鼠标锁定状态，此时会触发'pointerlockchange'事件，于是，给页面绑定鼠标移动改变图片旋转的方法，为了避免重复绑定，我们借助document.pointerLockElement判断页面的锁定状态。最后，为了方便取消页面的锁定状态，我们在页面上绑定了点击事件，通过document.exitPointerLock()取消页面的锁定状态。
注意：event.movementX和event.movementY表示每次mousemove事件触发时候，距离上次移动的水平和垂直位置大小，而不是具体的某个坐标值。因此，需要和初始坐标不断的累加确定当前移动位置。
总结
最后说下Pointer Lock API的兼容性。
由于Pointer Lock API是与鼠标相关的API，因此所有移动端都不支持，因为没有必要支持。
对于桌面浏览器，Chrome，Firefox以及Edge浏览器都是支持的，并且现在使用可以不加私有前缀，直接走起。IE并不支持，但这并不妨碍我们进行增强使用Pointer Lock API。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » Pointer Lock API实现的图片无限3D旋转实例