Folding card

dabblet.css

/** Folding card*/

.view {
	width: 340px;
	height: 200px;
	background: black;
	perspective: 500px;
}

.view .slice {
	width: 60px;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: left center;
	transition: transform 150ms ease-in-out;	
}

.view .s2, .view .s3, .view .s4, .view .s5 {
	transform: translate3d(60px, 0, 0);
}

.view .overlay {
	width: 60px;
	height: 100%;
	opacity: 0;
	position: absolute;
	transition: opacity 150ms ease-in-out;
}

.view:hover .overlay {
	opacity: 1;
}

.view img {
	position: absolute;
	z-index: 0;
	transition: left 0.3s ease-in-out;
}

.view:hover .s2 { 
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}

.view:hover .s3, .view:hover .s5 {
	transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}

.view:hover .s4 {
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

.view .s1 > .overlay {
	background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.view .s2 > .overlay {
	background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.view .s3 > .overlay {
	background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}

.view .s4 > .overlay {
	background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.view .s5 > .overlay {
	background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}

dabblet.html

<div class="view">	
	<div class="slice s1" style="background-color: #111;"><span class="overlay"></span>
		<div class="slice s2" style="background-color: #222"><span class="overlay"></span>
			<div class="slice s3" style="background-color: #333;"><span class="overlay"></span>
				<div class="slice s4" style="background-color: #444;"><span class="overlay"></span>
					<div class="slice s5" style="background-color: #555;"><span class="overlay"></span>
						</div>
					</div>   
				</div>   
			</div>   
		</div>
	</div>
</div>

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}