JSFiddle - React, Tailwind, and code Playground

by NancyChan

HTML

<div class="wrap">
		<div class="cube">
			<div class="front">
				<h2>Front side</h2>
				Front
			</div>
			<div class="back">
				<h2>black side</h2>
				black
			</div>
			<div class="top">
				<h2>top side</h2>
				top
			</div>
			<div class="bottom">
				<h2>bottom side</h2>
				bottom
			</div>
			<div class="left">
				<h2>left side</h2>
				left
			</div>
			<div class="right">
				<h2>right side</h2>
				right
			</div>
		</div>
	</div>

CSS

body {
	background: #000;
}
.wrap {
	margin:150px auto;
	cursor: pointer;
    perspective: 1500px;
    perspective-origin: 50% 50%;
}

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

.cube div {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #000;
	font: 20px arial;
	padding:10px;
 	box-sizing: border-box;
	border: 1px solid #eee;
	opacity: .6;
	transition:transform .1s ease-in-out;
	text-align: center;
}

.front {
    transform: translateZ(100px);
}

.back {
  transform: rotateX(-180deg) translateZ(100px) ;
}

.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}

.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}

.top {
    transform: rotateX(-270deg) translateY(-100px);
    transform-origin: top center;
}

.bottom {
    transform: rotateX(270deg) translateY(100px);
    transform-origin: bottom center;
}


/* rotate */

 @-webkit-keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(0deg);
    }
}

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


/* hover */
/*
.wrap:hover .front {
    transform: translateZ(200px);
}

.wrap:hover .back {
    transform: translateZ(-200px) ;
}

.wrap:hover .right {
    transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}

.wrap:hover .left {
    transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}

.wrap:hover .top {
    transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}

.wrap:hover .bottom {
    transform: rotateX(270deg) translateZ(100px) translateY(100px);
}
*/