JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		
		<div id="cube">
			<div id="top">
                <img src="http://www.norcom.ru/uses/images/logo_habr.png" width="300" height="300" />
			</div>

			<div id="front">
				HABR
			</div>
		</div>
	</div>

CSS

#wrapper{position:relative;}
#cube{
    width:300px;height:300px;
    font-size:50px;top:100px;left:100px;position:absolute;text-align:
    center;line-height:300px;cursor: default;}
#cube div{ 
    -webkit-transform-origin:50% 50% -150px;
    -ms-transform-origin:50% 50% -150px;
    transform-origin:50% 50% -150px;
    -webkit-transition: -webkit-transform .3s linear; 
    -ms-transition: -ms-transform .3s linear; 
    transition: transform .3s linear; 
    position:absolute;background: #D9FFFD;width:300px;height:300px;
    border:1px solid black;
}
#cube:hover #top{ 
	-webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
    -ms-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
    transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
    z-index:1;
}
#cube:hover #front{ 
	-webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,-90deg);
    -ms-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,-90deg);
    transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,-90deg);
    z-index:0;
}
#cube #top{ 
	-webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,90deg);
    -ms-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,90deg);
    transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,90deg);
    z-index:0;
}
#cube #front{ 
	-webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
    -ms-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
    transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
    z-index:1;
}