JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:100px; width:100px; background-color:red;">aoeu</div>

CSS

/*
     * As webkit-backface-visibillity: hidden; is broken
     * we simulate it with using transitions and opacity instead.
     */
div {
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-duration:2s, 0;
    -webkit-transition-timing-function:ease-in-out,ease-in-out;
    -webkit-transition-delay:0,1s;
}
div:hover {
    -webkit-transform: rotateX(-180deg) rotateY(0deg);
    opacity:0;
}