.container
	.mover
		- 6.times do
			.face
View Compiled
$l: 5em;

body { margin: 0; }

.container {
	overflow: hidden;
	height: 100vh;
	perspective: 20em;
	background: linear-gradient(#1c9edc 50%,
				#a048b9 0) 100% / 50% 100% no-repeat,
		linear-gradient(#ee8c25 50%,
				#d14730 0);
	font-size: 5vmin;
}

.mover {
	position: absolute;
	top: 50%; left: 50%;	
	transform-style: preserve-3d;
	animation: r 5s linear infinite;
}

.face {
	position: absolute;
	margin: -.5*$l;
	width: $l; height: $l;
	border-radius: 50%;
	background: url(http://www.followmefoodie.com/wp-content/uploads/2011/09/pies-blackberry-l.jpg) 50%/ 134%;
	mix-blend-mode: overlay;
	
	@for $i from 0 to 6 {
		&:nth-child(#{$i + 1}) {
			transform: if($i < 4, rotateY($i*90deg), 
					rotateX(pow(-1, $i)*90deg)) 
				translateZ(.5*$l)
		}
	}
}

@keyframes r {
	0% { transform: rotate(0turn) translate($l) rotateX(0turn) }
	to { transform: rotate(1turn) translate($l) rotateX(1turn) }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.