图片随鼠标无限旋转实例

HTML代码：

    <div class="box">
        <img src="timg.jpg" id="image" style="width: 400px;height: 300px;">

    </div>

CSS代码：

    .box{
        width: 400px;
        height: 300px;
        margin: 5em auto;
        perspective: 400px;

    }

JS代码：

    <script>

    // 获取图片
    var elemImg = document.getElementById("image");
    if(elemImg){
        // 起始值
        var moveX = 0,moveY = 0;
        // 图片旋转的方法
        var rotate3D = function (event) {
            moveX += event.movementX;
            moveY += event.movementY;
            elemImg.style.transform = 'rotateX(' + moveY + 'deg)rotateY(' + moveX + 'deg)';
        }
        elemImg.addEventListener('click',function () {
            // 点击图片，鼠标锁定
            elemImg.requestPointerLock();
        })
        // 再次点击，取消鼠标锁定
        document.addEventListener('click',function () {
            if (document.pointerLockElement) {
                document.exitPointerLock();
            }
        })


        document.addEventListener('pointerlockchange',function () {
            if(document.pointerLockElement == elemImg){
                // 添加旋转的事件
                document.addEventListener('mousemove', rotate3D, false);
            }else{
                // 移除旋转的事件
                document.removeEventListener('mousemove', rotate3D, false);
            }
        })
    }
</script>