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>