JSFiddle - React, Tailwind, and code Playground

HTML

<section id="perspective">
	      <svg id="tout" xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 744.1 1052.4">
        <path id="base" d="M60 269.5h608.6v463H60v-463z" fill="gray"/><path id="porte" d="M248.3 449.5h257v283h-257v-283z" fill="red"/>        
        </svg>
</section>

CSS

#perspective{
 
  
	}
#porte{
	animation:ouvreToi 4s ease-in-out ; 
	transform-style: preserve-3d; 
	transform-origin: 0% 0%;
  }
@keyframes ouvreToi{ 
    0% {transform: perspective(2000px)rotateY(0deg);} 
   100%{transform: perspective(2000px) rotateY(90deg);} 
}