внутри .frame позиционировать

dabblet.css

/* 
	внутри .frame позиционировать
	блоки на разных слоях 
	(по имени класса понятно каких)
	
	по клику на .frame изменять с 
	анимацией.
	у каждого блока позицию.
	по клику вне .frame 
	возвращать назад
	
	http://clck.ru/d/GiIRzL3l145IH
*/



.frame {
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#2c89aa), color-stop(72%,#5dd9ef));
background: -moz-linear-gradient(top, #2c89aa 36%, #5dd9ef 72%);
height: 300px;
width: 50%;
position: relative;
aoutline: none;
}

.front, .center, .back {
border-radius: 60px;
box-shadow: 2px -2px 10px rgba(255,255,255,.5), -2px 2px 8px rgba(255,255,255,.5);
position: absolute;
bottom: 15%;
-webkit-transition: left 3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: left 3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: left 3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.front {
background: rgba(255, 255, 255, .7);
width: 45%;
height: 70%;
left: 10%;    
z-index: 3;
}

.center {
background: rgba(255, 255, 255, .5);
width: 30%;
height: 50%;
left: 43%;
z-index: 2;
}
 
.back {
background: rgba(255, 255, 255, .2);
width: 19%;
height: 20%;
left: 5%;
z-index: 1;
}

.frame:focus .front {
left: 45%;    
}

.frame:focus .center {
left: 63%;
}

.frame:focus .back {
left: 20%;
}

dabblet.html

<div class="frame" tabindex="1">
	<div class="front"></div>	
	<div class="center"></div>	
	<div class="back"></div>	
</div>

settings.json

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