<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Magna Cubis</title>
</head>
<body>
	
	<div class="containCube">
		<div class="cube">
			<div class="cubeGroup cube-front cube-1"><h1>Front</h1></div>
			<div class="cubeGroup cube-top cube-2"><h1>Top</h1></div>
			<div class="cubeGroup cube-left cube-3"><h1>Left</h1></div>
			<div class="cubeGroup cube-right cube-4"><h1>Right</h1></div>
			<div class="cubeGroup cube-rear cube-5"><h1>Rear</h1></div>
			<div class="cubeGroup cube-bottom cube-6"><h1>Bottom</h1></div>
		</div>
	</div>
	
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap');

$bubble: 'Baloo Bhai', cursive;

body {
	background: black;
	overflow: hidden;
}
.containCube {
	position: relative;
	height: 100vh; width: 100%;
	perspective: 800px;
	.cube {
		position: absolute;
		height: 300px; width: 300px;
		top: 0; right: 0; bottom: 0; left: 0;
		margin: auto;
		box-sizing: border-box;
		//border: 1px dashed rgba(20, 20, 20, .3);
		// transform: rotatey(-10deg) rotatex(-20deg);
		transform-style: preserve-3d; transform-origin: 50% 50%;
		animation: rotate 20s ease-in-out infinite alternate;
	}
	.cubeGroup {
		position: absolute;
		display: grid;
		box-sizing: border-box;
		height: 100%; width: 100%;
		font-family: $bubble;
		color: white;
		text-shadow: 0 0 1px black;
		border: 3px dashed white;
		//border: 1px solid red;
		h1 {margin: auto;}
	}
	.cube-front {transform: translatez(150px)}
	.cube-rear {transform: translatez(-150px) rotatey(180deg)}
	.cube-right {transform-origin: 100%; transform: rotatey(90deg) translatex(150px);}
	.cube-left {transform-origin: 0%; transform: rotatey(-90deg) translatex(-150px);}
	.cube-bottom {transform-origin: 50% 100%; transform: rotatex(-90deg) translatey(150px);}
	.cube-top {transform-origin: 50% 0%; transform: rotatex(90deg) translatey(-150px);}
	@for $i from 1 through 6 {
		.cube-#{$i} {
			background: rgba(random(250), random(250), random(250), .9);
		}
	}
}

@keyframes rotate {
	10% {transform: rotate3d(1, 1, 0, 320deg)}
	20% {transform: rotate3d(1, 0, 0, -90deg)}
	30% {transform: rotate3d(1, 1, 0, 440deg)}
	40% {transform: rotate3d(1, 0, 0, -180deg)}
	50% {transform: rotate3d(1, 1, 0, 460deg)}
	60% {transform: rotate3d(0, 1, 0, -195deg)}
	70% {transform: rotate3d(1, 1, 0, 172deg)}
	80% {transform: rotate3d(0, 1, 0, -360deg)}
	90% {transform: rotate3d(1, 1, 0, 280deg)}
}

@keyframes rotateZed {
	20% {transform: translatez(100px)}
	40% {transform: translatez(-100px)}
	60% {transform: translatez(100px)}
	80% {transform: translatez(-100px)}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.