JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<table>
	<tr>
		<td>
			<div class="rotate face"><div class="text">bla-bla-bla</div></div>
			<div class="rotate back"></div>
		</td>
	</tr>
</table>

CSS

table, tr, td{	
	border:1px solid red;
	border-collapse:collapse;
}
td,.text{
	position:relative;	
}
td,.text,.face,.back{
	height:100px;
	width:200px;
}
td:hover{transform: rotateY(180deg);transform-style: preserve-3d;transition: 2s;}
.text{
	position:relative;
	text-align:center;
	top:35%;
}
.rotate{	
	position:absolute;
	top:0;
	right:0;
	bottom:0;
}
.back{
	background: url(http://cdn1.savepice.ru/uploads/2017/7/19/e245d768cbcfef7b7e9bf63bed318ece-full.png);
	border:1px solid blue;
	transform: rotateY(180deg); /* Вращаем по оси Y */
    backface-visibility: hidden;
}