Untitled

dabblet.css

body {
	min-height: 100%;
}
#parent {
	position: fixed;
	left: 100px;
	bottom: 50px;
	width: 300px;
	height: 350px;
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-ms-perspective: 400px;
	background: #eee;
	border: solid 1px #ccc;
}
#panel {
	width: 300px;
	height: 350px;
	background: #aaf;
	-webkit-transform: rotateY(111deg);
	-moz-transform: rotateY(111deg);
	-ms-transform: rotateY(111deg);
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
}
#parent:hover #panel {
	-webkit-transform: rotateY(0);
	-moz-transform: rotateY(0);
	-ms-transform: rotateY(0);
	background: #ffa;
}

dabblet.html

<div id="parent">
	<div id="panel">
		Lorem ipsum et dolor sit amet.
	</div>
	Hover me ^^^
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}