<style>
	#papa {
		margin: 20px auto;
		width: 1024px;
		height: 640px;
		border: 1px solid gray;
		perspective: 800px;
		display: grid;
		place-items: center;
		position: relative;
	}
	#papa div {
		display: inherit;
		place-items: inherit;
	}
	#box {
		position: absolute;
		width: 150px;
		height: 150px;
		transform-style: preserve-3d;
		transform: rotateX(-45deg) rotateY(45deg) rotateZ(0);
		animation: rot linear 16s infinite;
		--xx: 75px;
	}
	#front { transform: translateZ(var(--xx)); --bg: red; }
	#back { transform: rotateY(180deg) translateZ(var(--xx)); --bg: purple; }
	#left { transform: rotateY(-90deg) translateZ(var(--xx)); --bg: orange; }
	#right { transform: rotateY(90deg) translateZ(var(--xx)); --bg: green; }
	#top { transform: rotateX(90deg) translateZ(var(--xx)); --bg: cyan; }
	#bottom { transform: rotateX(-90deg) translateZ(var(--xx)); --bg: blue; }
	.board {
		position: absolute;
		width: 100%;
		height: 100%;
		background: var(--bg);
		opacity: 0.5;
	}
	.board::before, .board::after {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		background: linear-gradient(45deg, snow, yellow, snow) no-repeat center/4px 100%;
	}
	.board::after {
		transform: rotate(90deg);
	}
	@keyframes rot {
		to {
			transform: rotateX(315deg) rotateY(405deg) rotateZ(360deg);
		}
	}
</style>

<div id="papa">
	<div id="box">
		<div id="front" class="board"></div>
		<div id="back" class="board"></div>
		<div id="left" class="board"></div>
		<div id="right" class="board"></div>
		<div id="top" class="board"></div>
		<div id="bottom" class="board"></div>
	</div>
</div>