JSFiddle - React, Tailwind, and code Playground

by anothernick

HTML

<div class="wrap">
	<div class="cube">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</div>

CSS

.wrap {
	-webkit-perspective: 800px;
	-webkit-perspective-origin: 50% 100px;
    position: absolute;
    top:80px;
    left:160px;
}

.cube {
	position: relative;
	width: 200px;
	-webkit-transform-style: preserve-3d;
}

.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    font-size: 20px;
    text-align: center;
    line-height: 200px;
    color: rgba(0,0,0,0.5);
    font-family: sans-serif;
    text-transform: uppercase;
}
.back {
	-webkit-transform: translateZ(-100px) rotateY(180deg);
}
.right {
	-webkit-transform: rotateY(-270deg) translateX(100px);
	-webkit-transform-origin: top right;
}
.left {
	-webkit-transform: rotateY(270deg) translateX(-100px);
	-webkit-transform-origin: center left;
}
.top {
	-webkit-transform: rotateX(-90deg) translateY(-100px);
	-webkit-transform-origin: top center;
}
.bottom {
    -webkit-transform: rotateX(90deg) translateY(100px);
	-webkit-transform-origin: bottom center;
}
.front {
	-webkit-transform: translateZ(100px);
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotateY(0); }
	to { -webkit-transform: rotateY(360deg); }
}

.cube {
	-webkit-animation: spin 5s infinite linear;
}