Teste cubo

dabblet.css

.cubo {        
	transform-style: preserve-3d;        
	position: relative;        
	top: 100px;        
	left: 100px;        
	transform: rotateX(10deg) rotateY(10deg);      
}      

.face {        
	position: absolute;        
	width: 100px;        
	height: 100px;        
	display: block;        
	top: 0;        
	left: 0;      
}      

.frente {        
	background-color: red;        
	transform: translateZ(50px);      
}      
.direita {        
	background-color: blue;        
	transform: translateX(50px) roateY(90deg);      
}      
.esquerda {       
	 background-color: green;        
	 transform: translateX(-50px) rotateY(-90deg);      
 }      
 .cima {        
	 background-color: black;        
	 transform: translateY(50px) rotateX(90deg);      
 }      
 .baixo {        
	 background-color: yellow;        
	 transform: translateY(50px) rotateX(-90deg);      
 }      
 .tras {        
 	background-color: grey;        
	 transform: translateZ(-50px) rotateY(180deg);      
 }

dabblet.html

<div class="cubo">      
 	<div class="face frente"></div>      
 	<div class="face direita"></div>      
 	<div class="face esquerda"></div>      
 	<div class="face cima"></div>      
 	<div class="face baixo"></div>      
 	<div class="face tras"></div>    
 </div>

settings.json

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