Folding card 2

dabblet.css

/** Folding card 2*/

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

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

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

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

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

.view:hover .s1 {
	transition-delay: 200ms; 
	transform: rotate3d(0,1,0,-3deg);
}

.view:hover .s2{
	transition-delay: 150ms; 
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
}

.view:hover .s3{
	transition-delay: 100ms;
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
}

.view:hover .s4 {
	transition-delay: 50ms;
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
}

.view:hover .s5 {
	transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
}

.view .s4 > .overlay {
	background: linear-gradient(right, rgba(0,0,0,0.3) 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":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}