Untitled

dabblet.css

body {
}
.container {
width:100px;
height:200px;
border:1px solid red;
margin:0 auto;
perspective:600px;
transform-style:preserve-3d;
}
.box {
float:left;
background-color:purple;
width:100%;
height:100%;
border:1px solid green;
margin:0 auto;
transform-origin:top left;
transition: all 1s ease-in-out;
}
.box:hover {
transform:  rotateY(-89deg);
}
.hidden {
width:50%;
height:50%;
background-color:orange;
margin:auto auto;
}

dabblet.html

<div class="container">
	<div class="box"></div>
	<div class="hidden"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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