<div class="container">
	<div class="cube">
		<div class="face"></div>
		<div class="face"></div>
		<div class="face"></div>
		<div class="face"></div>
		<div class="face"></div>
		<div class="face"></div>
	</div>
	<div class="hexa"></div>
</div>
@import "compass/css3";

$bg: #fbfafb;
$front: #201f20;
$duration: 5s;
$easing: cubic-bezier(.7,0,.3,1);
$step: 100% / 6;

html, body { height: 100%; }
body {
	background: $bg;
	overflow: hidden;
	* { position: absolute; top: 50%; left: 50%; }
}

.container {
	font-size: 180px;
}
$baseRot: rotateX(acos(sqrt(2/3)) * -1rad) rotateY(45deg);
@keyframes cube {
	from, #{$step * 4} { transform: $baseRot rotateX(0) rotateY(0); }
	#{$step * 5} { transform: $baseRot rotateX(90deg) rotateY(0); }
	to { transform: $baseRot rotateX(90deg) rotateY(-90deg); }
}
.cube {
	animation: cube $duration $easing infinite;
	transform-style: preserve-3d;
}
@keyframes facebg {
	from { background-position: 0 1em; }
	#{$step * 4}, to { background-position: 0 0; }
}
.face {
	width: 1em; height: 1em;
	color: $front;
	background: currentColor no-repeat;
	$p1: 25%; $p2: 75%;
	$grad: linear-gradient(45deg, transparent $p1, $bg $p1, $bg $p2, transparent $p2);
	&:nth-child(1) { transform: translate(-50%, -50%) translateZ(.506em); background-image: $grad; animation: facebg $duration steps(1) infinite; }
	&:nth-child(2) { transform: translate(-50%, -50%) rotateY(90deg) translateZ(.5em); }
	&:nth-child(3) { transform: translate(-50%, -50%) rotateX(90deg) translateZ(.5em); }
	&:nth-child(4) { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(.5em); }
	&:nth-child(5) { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(.5em); }
	&:nth-child(6) { transform: translate(-50%, -50%) translateZ(-.5em); }
}
.hexa {
	background: $bg;
	$w: 1em / sqrt(2); $h: 1em / sqrt(6);
	width: $w; height: $h;
	&:before, &:after {
		content: '';
		position: absolute;
		top: 50%; left: 50%;
		width: 100%; height: 100%;
		background: inherit;
		transform: translate(-50%, -50%) rotate(60deg);
	}
	&:after { transform: translate(-50%, -50%) rotate(-60deg); }
	
	// rotate around ($x, $y)
	@function r($x, $y, $angle) {
		@return translate($x, $y) rotate($angle) translate(-$x, -$y);
	}
	$hw: .5em / sqrt(2); $hh: .5em / sqrt(6);
	$bt: scale(1.008) translateX(-100%) translateX(-.5px);
	$adj: 2px;
	@keyframes hexa {
		from { transform: $bt r(-$hw, -$hh, 0deg) r($hw, -$hh, 0deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); visibility: visible; }
		#{$step} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, 0deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); }
		#{$step * 2} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, -60deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); }
		#{$step * 3} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, -60deg) translateY($adj) r(0, $h, -60deg) translateY(-$adj) r(-$hw, -$hh, 0deg); }
		#{$step * 4} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, -60deg) translateY($adj) r(0, $h, -60deg) translateY(-$adj) r(-$hw, -$hh, -60deg); visibility: hidden; }
		to { transform: $bt r(-$hw, -$hh, 0deg) r($hw, -$hh, 0deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); visibility: hidden; }
	}
	animation: hexa $duration $easing infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.