Untitled

dabblet.css

.cubo {
	transform-style: preserve-3d;
	width: 720px;
	margin: 60px auto;
	position: relative;
	transform: rotateX(10deg) rotateY(10deg);		
}
.face {
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
}		
.frente {
	background-color: rgba(0, 0, 0, 0.3);
	transform: translateZ(-100px) translateY(-1px);		
}		
.direita {
	background-color: rgba(255, 0, 0, 0.3);
	transform: translateX(-59px) translateY(8px) rotateY(-90deg);
}		
.esquerda {
	background-color: rgba(255, 0, 0, 0.3);
	transform: translateX(41px) translateY(8px) rotateY(90deg);		
}		
.cima {
	background-color: rgba(0, 255, 255, 0.6);
	transform: translateY(-42px) translateX(-9px) rotateX(-90deg);		
}	
.baixo {  			
	background-color: rgba(0, 255, 255, 0.6);			
	transform: translateY(58px) translateX(-9px) rotateX(90deg);		
}		
.tras {  			
	background-color: rgba(0, 0, 0, 0.3); 			
	transform: translateZ(55px) translateX(-10px) translateY(9px) 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>

dabblet.js

// alert('Hello world!');

settings.json

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