CodePen — F*CK — http://codepen.io/matthisamoto/full/flmqK

index.html

<section class="row">	
	<div class="block">
		<div class="front">
			<div class="contain">
				<p>F</p>
			</div>
		</div>
		<div class="back">
			<div class="contain">
				<p>is for<br>Feynman</p>
			</div>
		</div>
	</div><!--
	--><div class="block">
		<div class="front">
			<div class="contain">
				<p class="large">&ast;</p>
			</div>
		</div>
		<div class="back">
			<div class="contain">
				<p>is for<br>Boom</p>
			</div>
		</div>
	</div><!--
	--><div class="block">
		<div class="front">
			<div class="contain">
				<p>C</p>
			</div>
		</div>
		<div class="back">
			<div class="contain">
				<p>is for<br>Copernicus</p>
			</div>
		</div>
	</div><!--
	--><div class="block">
		<div class="front">
			<div class="contain">
				<p>K</p>
			</div>
		</div>
		<div class="back">
			<div class="contain">
				<p>is for<br>Kepler</p>
			</div>
		</div>
	</div>
</section>

style.css

/*
 *  I had help.
 *  
 *  Thanks Chris Ruppel: 
 *  http://css3playground.com/hover.php
 *
 *  and
 *  
 *  Thanks James Tauber:
 *  http://jtauber.github.io/articles/css-hexagon.html
 *  
 */

html, body, html * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
body { background-color: #eee; text-align: center; font-family: serif; }
.row { background-color: #fff; margin: 0 auto; max-width: 960px; min-width: 276px; padding: 24px 24px 14px 24px; text-align: center; }
.row:after {
	content: "";
	display: table;
	clear: both;
}
.block {
	cursor: pointer;
	width: 208px;
	height: 240px;
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	margin: 0 10px 20px;
	display: inline-block;
}
.block .contain:before {
	content: "";
	display: block;
	position: absolute;
	top: -60px;
	width: 0;
	border-bottom: 60px solid #17a460;
	border-left: 104px solid transparent;
	border-right: 104px solid transparent;
}
.block .contain {
	width: 208px;
	height: 120px;
	background: #17a460;
	position: relative;
	margin-top: 60px;
}
.block .contain:after {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	width: 0;
	border-top: 60px solid #17a460;
	border-left: 104px solid transparent;
	border-right: 104px solid transparent;
}

.block p { color: #fff; font-family: Georgia; margin: 0; padding: 0; text-align: center;
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: inherit;
}
.block .front p { padding: 10px 0 0; font-size: 86px; }
.block .front p.large { padding: 0; font-size: 160px; line-height: 178px; }
.block .back p { padding: 28px 0 0; font-size: 28px; }
.block .front {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	width: inherit;
	height: inherit;
	
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.block:hover .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.block .back {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 800;
	width: inherit;
	height: inherit;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.block:hover .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}