#f4 {

dabblet.css

.cubo {	
	transform-style: preserve-3d;
	perspective: 1px;
	position: relative;
	left: 50%;
	top: 100px;
}
.face {	
	width: 100px;
	height: 100px;
	position: absolute;
	border: 1px solid;
}
#f1 {
    background-color: rgba(255,0,0,0.35);
    z-index: 3;
}

#f2 {
    transform: translateZ(50px);
    background-color: #B00;
	background-color: rgba(0,0,255,0.35);}

#f3 {
    transform: rotateY(90deg) translateX(50px);
	background-color: rgba(0,255,0,0.35);
	z-index: 2;
}
/*
#f4 {
    transform: rotateX(90deg) translateX(-50px);
    background-color: #700;
}
#f5 {
    transform: rotateX(180deg) translateZ(-50px);
   	background-color: #500;
}
#f6 {
	transform: rotateX(180deg) translateZ(-50px);
	background-color: #300;
}

*/

dabblet.html

<div class="cubo">      <div id="f1" class="face"></div>      <div id="f2" class="face"></div>      <div id="f3" class="face"></div>      <div id="f4" class="face"></div>      <div id="f5" class="face"></div>      <div id="f6" class="face"></div>    </div>

dabblet.js

// alert('Hello world!');

settings.json

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