Flipp down cell

dabblet.css

/**
 * Flipp down cell
 */
 body {
 	background: Olive;
 }
 .cell {
 	background: #444;
	width: 200px;
	height: 200px;
	position: relative;
	text-align: center;
	perspective: 1000px;
 }
#flip-down {
	width: 200px;
	height: 200px;
	background: Orange;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: transform .5s ease-in;
	transform-origin: 50% 100% 0;
	perspective-origin: 0% 0%;
}
.back {
	background: Black;
	position: absolute;
	bottom:0;
	left: 0;
	width: 200px;
	height: 200px;
	transition: transform .5s ease-in;
	transform-origin: 50% 100% 0;

}
.cell:hover #flip-down,
.cell:hover .back,
#flip-down:hover,
#flip-down:hover + .back {
	transform-style: preserve-3d;
	transform: rotateX(-180deg);
	transition: transform .3s cubic-bezier(.94,.66,.86,1.52);
}
 .cell:hover #flip-down,
#flip-down:hover {
	backface-visibility: hidden;
}

dabblet.html

<div class="cell">Hello World!<div class="back"></div><div id="flip-down" class="front">just a test</div></div>

settings.json

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