JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wraper">
<div id="cube">
<div class="side"  id="side1">1</div>
<div class="side"  id="side2">2</div>
<div class="side"  id="side3">3</div>
<div class="side"  id="side4">4</div>
<div class="side"  id="side5">5</div>
<div class="side"  id="side6">6</div>
</div>
</div>

CSS

#wraper {
	perspective: 900px;
	margin: 80px;	
}
.side {
	width: 300px;
	height: 300px;
	background: rgba(0,0,0,0.3);
	position: absolute;
	border: 10px solid #fff;
	border-radius: 10px;
	font-size: 5em;
	color: #fff;
	text-align: center;
	line-height:300px;
	background: radial-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5));
	box-shadow: 0 0 6px rgba(0,0,0,0.5);
	transform-origin: 50% 50% -150px;	
}
#side2 {
	transform:rotateY(90deg);
}
#side3{
	transform:rotateY(-90deg);
}
#side4 {
	transform:rotateX(90deg);
}
#side5 {
	transform:rotateX(-90deg);
}
#side6 {
	transform:rotateY(180deg);
}
#cube {	
    transform: rotate3D(1,1,1,-45deg); 
	position: relative;
	width: 300px;
	height: 300px;
	transform-style: preserve-3d;
	transform-origin: 50% 50% -150px;	
}
#side2:hover+#cube{	
	transform:rotate3d(1,1,1,45deg);
	transition: all 0.2s ease-in-out;
}