Improved flip down effect

dabblet.css

/**
 * Improved flip down effect
 */
.face.back {
	display: none;
}
#f2_container {
	position: relative;
	margin: 10px auto;
	width: 450px;
	height: 281px;
	z-index: 1;
}
#f2_container {
	perspective: 1000px;
}
#f2_card {
	width: 100%;
	height: 100%;	
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	transition: all .5s ease-in;
}
#f2_container:hover #f2_card, 
#f2_container.hover_effect #f2_card {
	transform-origin: 50% 100%;	
	transform: rotateX(-180deg);
	box-shadow: 5px -5px 5px #aaa;		
}
.face {	
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.face.back {
	display: block;
	transform: rotateY(-180deg);
	box-sizing: border-box;
	padding: 10px;
	color: white;
	text-align: center;
	background-color: #aaa;
}
	

dabblet.html

<div id="f2_container" class="hover">
		<div id="f2_card" class="shadow">
			<div class="front face">
				<img src="http://css3.bradshawenterprises.com/images/Cirques.jpg">
			</div>
			<div class="back face center">
				<p>Note that I've had to change the shadow to keep it looking normal.</p>
			</div>
  		</div>
	</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}