.displayBase { perspective: 400px; perspective-origin: 50% 50%; }
.displayBase * { transform-style: preserve-3d; }

.display { position: absolute; left: 50%; top: 50%; }

.segments { list-style-type: none; float: left; margin: 0; padding: 10px; border: 20px solid #b70000; border-radius: 10px; box-sizing: border-box; }

.segment { color: #aaa; text-align: center; position: relative; float: left; text-transform: uppercase; }
.segment div {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 50%;
	overflow: hidden;
	background-color: #222;
	text-shadow: 1px 1px 0 rgba( 255, 255, 255, .8 ), -1px -1px 0 rgba( 0, 0, 0, .8 ), -1px -1px 0 rgba( 0, 0, 0, .2 );
	box-shadow: inset 0 0 50px rgba( 90, 90, 90, .2 );
}
.segment .front { border-radius: 5px 5px 0 0; }
.segment .back { top: 50%; border-radius: 0 0 5px 5px; line-height: 0; }
.segment .flip-back { background-color: black; border-radius: 5px 5px 0 0; }
.segment .flip-front { line-height: 0; border-radius: 0 0 5px 5px; }