JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<script src="http://modernizr.com/downloads/modernizr.js"></script>
<article class="active">

   <div class="f1">
    The incident was the latest clash between Mr. Forstall, who oversaw Apple's mobile software unit, and other executives at the company. It led to one of the most significant management shake-ups in Apple's recent history and its most sweeping changes under Chief Executive Tim Cook.
    </div>

    
    <div class="f2">
Basandosi sulle piattaforme web Chalco.net e Pincushion, Hyphen-Italia progetta e sviluppa soluzioni tecnologiche per esprimere il reale valore degli asset digitali di ogni azienda attraverso una gestione efficace dei dati di prodotto e di processo.
    </div>
    
</article>

CSS

body{
    transform-style: preserve-3d;
    perspective: 500px;
}

article{
    width: 300px;
    position: relative;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transform-style: preserve-3d;
}

article.active{
    transform: rotateY(180deg);
}

article:not(.active):hover{
    transform: rotateY(30deg);
}

.f1{
   position: relative;
   background: green;
   transform: translateZ(1px);
   z-index: 2;
}

.f1:hover{
    background: blue;
}

.f2{
    background: pink;
    position: absolute;
    top: 0; left:0; right:0; bottom:0;    
    transform: rotateY(180deg);
}

.active .f2{
    z-index: 3;
}