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

dabblet.css

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

.frame
{
	position: relative;
	width: 300px;
	height: 200px;
	background: -webkit-linear-gradient(top,  #91cff1 0%,#f4f7dd 100%); 
	background: -o-linear-gradient(top,  #91cff1 0%,#f4f7dd 100%);
	background: linear-gradient(top,  #91cff1 0%,#f4f7dd 100%);
}

.frame:hover
{
	cursor: pointer;
}

.front, .center, .back
{
	position: absolute;
	transition: left .5s ease-in;
}

.front
{
	z-index: 3;
	width: 150px;
	height: 130px;
	background-color: rgba(255,255,255,0.6);
	border-radius: 30px;
	top: 40px;
	left: 30px;	
}

.center
{
	z-index: 2;	
	width: 112px;
	height: 82px;
	background-color: rgba(255,255,255,0.3);
	border-radius: 40px;
	top: 80px;
	left: 135px;
	box-shadow: 0 0 20px 2px rgba(255,255,255,0.8), 0 0 20px 2px rgba(255,255,255,0.8) inset;;
}

.back
{
	z-index: 1;
	width: 60px;
	height: 40px;
	background-color: rgba(255,255,255,0.1);
	box-shadow: 0 0 15px 1px rgba(255,255,255,0.5);
	border-radius: 40px;
	top: 120px;
	left: 20px;
}

/*Двигаем дивы, после актива идет фокус, 
что помогает оставить див в нужной нам позиции, 
отжимаем фокус пропадает - блок возвращается 
на место*/
.frame:focus .front
{
	left: 120px;
}

.frame:focus .center
{
	left: 170px;
}

.frame:focus .back
{
	left: 40px;
}

/* Не понял почему съежает фокус при клике, 
размеры блока то не меняются о_О */

dabblet.html

<div class="frame" tabindex="1" title="Нажми на меня!">
	<div class="front"></div>	
	<div class="center"></div>	
	<div class="back"></div>	
</div>

settings.json

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