<div class='rotor'>
	<div class='card'>
		<div class='face'>front</div>
		<div class='face'>back</div>
	</div>
</div>

$dim: 40vmin;

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 20em;
}

div {
	position: absolute;
	width: $dim; height: $dim;
}

.rotor {
	top: 50%; left: 50%;
	margin: -.5*$dim;
	transform-style: preserve-3d;
	animation: rot 4s ease-in-out infinite;
}

.card {
	overflow: hidden;
	transform: rotate(-45deg);
	transform-style: preserve-3d;
	text-align: center;
	font: calc(1em + 10vmin)/#{$dim} 
		trebuchet ms, verdana, arial, sans-serif;
	// calc() in shorthand doesn't work in Firefox :(
	// bug 1304014
	font-size: calc(1em + 10vmin);
	line-height: $dim;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}

@keyframes rot {
	50% { transform: rotateY(.5turn); }
	100% { transform: rotateY(1turn); }
}

.face {
	transform: rotate(45deg);
	backface-visibility: hidden;
	background: #ee8c25;
	
	&:last-child {
		transform: rotateY(.5turn) rotate(-45deg);
		background: #d14730;
	}
}