Ахаха, я что-то совсем запуталась в x и y
На основе Вашего примера вроде вот так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.doors {
display: inline-block;
}
.block {
width: 100px;
height: 150px;
display: inline-block;
background: #e79e6d;
border: 2px solid #333;
transition: transform 1s;
}
</style>
<script>
$(function (){
$('.block').on('mousemove', function(e) {
var coords = e.target.getBoundingClientRect();
degY = e.pageX - (coords.left + coords.width)/2
degX = -e.pageY + (coords.top + coords.height)/2
e.target.style.transform = 'perspective(300px) rotateX(' + degX/1.5 + 'deg) rotateY(' + degY/1.5 + 'deg)';
});
})
</script>
<body onload = "first()">
<div class="doors">
<div class="block">1</div>
</div>