JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="flipBoxcontainer flipBox">
        <div class="card">
            <div class="face front">
               yyyyy
            </div>
            <div class="face back">
               ooooo
            </div>
         </div>
    </div>

CSS

* {
-webkit-font-smoothing: antialiased;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

.flipBoxcontainer {
    min-width: 242px; 
    height: 362px;
    float:left;
    -webkit-perspective: 1000;
}
.card, .flipBox .back,.flipBox .front{
    width: 100%; 
    height: 100%;  
}
.card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    
}
    

.face {
    position: absolute;
    -webkit-backface-visibility: hidden;
}


    
.flipBox {
    float: left; position: absolute; top: 120px; right: 20px;
    -webkit-transform: rotate(0deg);
}
    
    .flipBox .back {
        -webkit-transform: rotateY(180deg);
        background: #999; 
    }
       
.front {
    z-index: 10;
    background:blue;
}
.flipBoxcontainer:hover .front {
    z-index: 0;
} 

.flipBoxcontainer:hover .card {
                  -webkit-transform: rotateY(180deg) translateX(0px) translateZ(0px);      
    }