The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 http://codepen.io/anon/pen/KjhJt
 */

*{margin:0;padding:0;}
html{
height:450px;
background:linear-gradient(#9162D8,#382A99) no-repeat;
font:.8em sans-serif;
color:#111;
color:#eee;
text-shadow:0 -1px 0 rgba(0,0,0,.7);
}
body > div{
margin:100px auto;
width:500px;height:160px;
perspective:500px;
perspective-origin:50% 80px;
}
body > div div{
background-color:#111;
background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,0));
width:100px;height:165px;
list-style:none;text-align:center;
/*display:table-cell;*/
display:inline-block;
transform-origin:50% 50%;
transform:rotateY(45deg);
transition: all .5s;
box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
-5px 0px 5px -5px rgba(0,0,0,.8);
}
body > div:hover div{
transform:rotateY(0deg);
}

dabblet.html

<div>
	<div></div><div></div><div></div><div></div>
</div>

settings.json

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