Untitled

dabblet.css

div#viewport {
	border: 5px solid hotpink;
	width: 320px;
	height: 180px;
	position:relative;
	margin: 0 auto;
}

div div {
	width: 320px;
	height: 180px;
	position: absolute;
}

div.left div {
	-webkit-transform: translateX(100%);
}

div.right div {
	-webkit-transform: translateX(-100%);
}

div div:nth-child(1) {
	background: blue;
	left: -100%;	
}

div div:nth-child(2) {
	background: red;	
	left: 0;
}

div div:nth-child(3) {
	background: green;	
	left: 100%;
}

dabblet.html

<div id=viewport>
	<div></div>
	<div></div>
	<div></div>
</div>

<button>Prev</button>
<button>Next</button>

dabblet.js

// alert('Hello world!');

settings.json

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