body{
perspective: 500px;
transform-style: preserve-3d;
}
.box{
background-color: pink;
width: 500px;
height: 500px;
margin: 200px auto 0px;
transition: all 0.8s ease;
}
<body>
<div class="box" οnmοusemοve="go(event)"></div>
<script>
function go (e){
let x = (e.offsetX-250) / 15; 这里的250是要位移的div宽度的一半
let y = (e.offsetY-250) / 15;
let yy = -y； 这里取个反可以改变鼠标向上时rotatex轴的旋转方向
document.querySelector('.box').style.transform = `translate(${x}px,${y}px)rotateX(${yy}deg) rotateY(${x}deg)`
}
</script>
</body>
