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{
}
ul{
margin:100px auto;
width:500px;height:160px;
perspective:500px;
perspective-origin:50% 80px;
}
ul li{
z-index:60;
background-color:red;
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;
/**
 * 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);
}


x-shadow:0 0 0px 3px rgba(255,255,255,.2);*/
}

ul li:nth-child(3){
transform:rotateY(0) scale(1.22);
}
ul:not(:hover) li:nth-child(3) ~ li{
transform:rotateY(-45deg);
z-index:50;
}
ul:not(:hover) li ~ li:last-child,
ul:hover li:hover ~ li:last-child{
z-index:40;
}
ul:hover li{
transform: rotateY(45deg);
/*background:blue;*/
}
ul:hover li:hover{
transform: rotateY(0) scale(1.22);
z-index:60;
}
ul:hover li:hover ~ li{
transform: rotateY(-45deg);
z-index:50;
}

dabblet.html

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

settings.json

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