JSFiddle - React, Tailwind, and code Playground

HTML

<div class="doorframe">
    <div class="door"></div>
</div>

CSS

body {
    padding: 20px;    
}
.doorframe {
    border: 1px solid black;
    display: inline-block;
}
.door {
    width: 60px;
    height: 140px;
    background-color: #ccc;
    border: 1px solid #444;
    -webkit-transform-origin: left;
    background-image: url("http://www.doorasia.in/images/gallery/moulded_door01.jpg");
    background-position: -49px -7px;
    background-size: 158px 155px;
}

JavaScript

var animating = false;

$('.doorframe').mouseenter(function() {
    if(animating) return;
    var door = $('.door');
    //door.css('-webkit-transform', 'perspective(0px) rotateY( 0deg )');
    animating = true;
    openDoor(door, 5);
});
$('.doorframe').mouseleave(function() {
    if(animating) return;
    var door = $('.door');
    //door.css('-webkit-transform', 'perspective(0px) rotateY( 90deg )');
    animating = true;
    closeDoor(door, 90);
});
    
function openDoor(door, angle) {
    if(angle >= 90) {
        animating = false;
        return;        
    }
    door.css('-webkit-transform', 'perspective(200px) rotateY( '+angle+'deg )');
    setTimeout(function() {
        openDoor(door, angle+=5);
    }, 50);
}

function closeDoor(door, angle) {
    if(angle < 0) {
        animating = false;
        return;        
    }
    door.css('-webkit-transform', 'perspective(200px) rotateY( '+angle+'deg )');
    setTimeout(function() {
        closeDoor(door, angle-=5);
    }, 50);
}