JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container">
	<div class="box outer outer--left"><div class="box box--left"></div><div class="box box--top"></div></div>
	<div class="box outer outer--right"><div class="box box--left"></div><div class="box box--top"></div></div>
	<div class="box inner inner--left"><div class="box box--left"></div><div class="box box--top"></div></div>
	<div class="box inner inner--right"><div class="box box--left"></div><div class="box box--top"></div></div>
</div>

CSS

body {
	background-color: #000;
}
.container {
	position: relative;
	width: 100px;
	height: 100px;
	transform: rotate3d(0, 1, 0, 45deg);
	perspective: 300px;
	transform-style: preserve-3d;
	animation: rotate 2s linear infinite;
	margin: 200px;
}

.box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	transform: translateZ(-50px);
}

.box--left, .box--top {
	background-color: inherit;
	transform-origin: 0 0;
	transform: translateZ(-50px) rotateY(90deg);
}
.box--top {
	transform-origin: 100% 0;
	transform: translateZ(-50px) rotateX(-90deg);
}

.outer {
	background-color: #FFF;
	transform: translateZ(-50px);
}

.outer--right {
	transform: scale(-1) translateZ(50px);
}

.inner {
	background-color: #000;
	transform: scale(0.9) translateZ(50px);
}

.inner--right {
	transform: scale(-0.9) translateZ(50px);
}

@keyframes rotate {
	0 {
		transform: rotate3d(0, 1, 0, 45deg);
	}
	100% {
		transform: rotate3d(0, 1, 0, 405deg);
	}
}