The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */


body 	{font-family: georgia, serif; background: #ccc;}

@-webkit-keyframes girando {
	from,20% 	{ -webkit-transform: rotateY(0deg);   }			
	30%,40%  	{ -webkit-transform: rotateY(90deg);  }			
	50%,60%  	{ -webkit-transform: rotateY(180deg); }			
	70%,80% 	{ -webkit-transform: rotateY(270deg); }			
	90%,to		{ -webkit-transform: rotateY(360deg); }			
}
@-moz-keyframes girando {				
	from,20% 	{ -moz-transform: rotateY(0deg);   }		
	30%,40%  	{ -moz-transform: rotateY(90deg);  }	
	50%,60%  	{ -moz-transform: rotateY(180deg); }	
	70
	0% 	{ -moz-transform: rotateY(270deg); }			
	90%,to		{ -moz-transform: rotateY(360deg); }			
}

#container {		
    margin: 30px auto;		    
    -webkit-perspective: 500px;		
    -moz-perspective: 500px;				
    perspective: 500px;		
}

#girando {				
	margin: 10px auto;				
	width: 300px;			
	padding: 30px;				
	-webkit-animation-name: girando;				
	-moz-animation-name: girando;				
	animation-name: girando;				
	-webkit-animation-timing-function: ease-out;				
	-moz-animation-timing-function: ease-out;				
	animation-timing-function: ease-out;				
	-webkit-animation-iteration-count: infinite;				
	-moz-animation-iteration-count: infinite;				
	animation-iteration-count: infinite;				
	-webkit-animation-duration: 10s;				
	-moz-animation-duration: 10s;				
	animation-duration: 10s;				
	-webkit-transform-style: preserve-3d;				
	-moz-transform-style: preserve-3d;				
	transform-style: preserve-3d;			
}				
#girando:hover {					
	-webkit-animation-play-state: paused;					
	-moz-animation-play-state: paused;					
	-ms-animation-play-state: paused;					
	animation-play-state: paused;				
}								
#girando span {				
  	position: absolute;					
  	width: 320px;					
  	height: 260px;
  	overflow: hidden;				  	
  	border: 2px solid #fff;					
  	font-weight: bold;					
  	font-size: 120px;					
  	text-align: center;				  	
  	text-shadow: #fff 2px 2px 1px;			
  	opacity: 0.8;				
}					#uno {						-webkit-transform: rotateY(0deg) translateZ(160px);						-moz-transform: rotateY(0deg) translateZ(160px);						transform: rotateY(0deg) translateZ(160px);					}					#dos {						-webkit-transform: rotateY(-90deg) translateZ(160px);						-moz-transform: rotateY(-90deg) translateZ(160px);						transform: rotateY(-90deg) translateZ(160px);					}					#tres {						-webkit-transform: rotateY(-180deg) translateZ(160px);						-moz-transform: rotateY(-180deg) translateZ(160px);						transform: rotateY(-180deg) translateZ(160px);					}					#cuatro {						-webkit-transform: rotateY(-270deg) translateZ(160px);						-moz-transform: rotateY(-270deg) translateZ(160px);						transform: rotateY(-270deg) translateZ(160px);					}
	

dabblet.html

<div id="container">		
<div id="girando">			
	<span id="uno">				
		<img src="http://www.mielsobrehojuelas.info/wp-content/uploads/2012/06/jorge.jpg" width="320">			
	</span>			
	<span id="dos">				
		<img src="http://www.mielsobrehojuelas.info/wp-content/uploads/2012/06/198199_10150121977719317_594044316_6611916_5990914_n-409x350.jpg" width="320">			
	</span>			
	<span id="tres">				
		<img src="http://www.mielsobrehojuelas.info/wp-content/uploads/2012/06/jorge.jpg" width="320">			
	</span>			
	<span id="cuatro">			
		<img src="http://www.mielsobrehojuelas.info/wp-content/uploads/2012/06/198199_10150121977719317_594044316_6611916_5990914_n-409x350.jpg" width="320">			
	</span>		
</div>	
</div>

settings.json

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