Page flipper

dabblet.css

/**
 * Page flipper
 */
* {
	box-sizing:border-box;
}
.pages {
	position:relative;
	width:30%; height:250px;
	
}
.pages > div {
	transition:all 1s linear;
	position:absolute;
	right:0;
	padding:30px;
	background:#C0C0F0;
	width:50%;height:100%;
}
.pages > .cover {
	z-index:100;
	background:#C0F0C0;
	font-size:3em;text-align:center;
}
.pages > .page:nth-child(2) {
	z-index:110;
	background:grey;
	transform:rotate(-20deg) translateX(100%);
	transform-origin:center right;
}
.pages:hover > .cover {
	margin-right:50%;
}
.pages:hover > .page:nth-child(2) {
	transform: rotate(0) translateX(-100%);
}

dabblet.html

<div class="pages">
	<div class="cover">Menu</div>
	<div class="page">Blaa</div>
	<div class="page">Tlaa</div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}