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>