JSFiddle - React, Tailwind, and code Playground

HTML

<div id="redRectangle"></div>

CSS

#redRectangle {
    width: 150px;
    height: 150px;
    background-color: red;
    -ms-transition-property: all;
    -ms-transition-duration: 1s;
    -ms-transition-timing-function: ease;
    -webkit-transition-property: all;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;
    -moz-transition-property: all;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease;
    -o-transition-property: all;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
    -ms-backface-visibility: visible;
    -ms-transform-origin: 50% 50%;
    -webkit-backface-visibility: visible;
    -webkit-transform-origin-x: 50%;
    -webkit-transform-origin-y: 50%;
    -moz-backface-visibility: visible;
    -moz-transform-origin: 50% 50%;
    -o-backface-visibility: visible;
    -o-transform-origin: 50% 50%;
    
    -ms-transform: perspective(500px) rotateY(0deg) scale(1);
    -webkit-transform: perspective(500px) rotateY(0deg) scale(1);
    -moz-transform: perspective(500px) rotateY(0deg) scale(1);
    -o-transform: perspective(500px) rotateY(0deg) scale(1);
}

    #redRectangle:hover {
        background-color: green;
        -ms-transform: perspective(500px) rotateY(-90deg) scale(0.1);
        -webkit-transform: perspective(500px) rotateY(-90deg) scale(0.1);
        -moz-transform: perspective(500px) rotateY(-90deg) scale(0.1);
        -o-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    }