Cover *

dabblet.css

.book {
  display: inline-block;
  margin: 10px;
}

.book img { 
	vertical-align: middle; 
}

.books {
  -webkit-transform-style: preserve-3d;
    margin-top: 100px;
    margin-left: 10px;
}

.book {
  position: relative;
  -webkit-transform: perspective(180) rotateY(-3deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  margin: 0;
  box-shadow: rgba(0,0,0,0.25) 5px 30px 50px 0;
}

.book img {
  position: relative;
  max-width: 100%;
}

.backcover,
.paper {
  position: absolute;
  top: 1%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

/** Cover **/
.backcover {
  width: 100%;
  left: 2%;
  background-color: #6b3c60;
  box-shadow: 5px 5px 20px #333;
}

/** Pages **/
.paper {
  width: 1.2%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -webkit-transform: perspective(100) rotateY(20deg);
}

.spine {
	width: 15px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;	
	z-index: 2;
	box-shadow: inset -3px 0 10px 0 rgba(0,0,0, 0.25);
}

dabblet.html

<div class="books">
	<div class="book">
		<div class="spine"></div>
		<div class="backcover"></div>
		<img src="http://storybird.s3.amazonaws.com/storyplayer_cover_images/pbfwcyn5x9.jpeg" width="700">
		<div class="paper"></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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