Untitled

dabblet.css

.cubo {	
	transform-style: preserve-3d;
	transform: rotateX(15deg) rotateY(15deg);
	perspective: 1500px;
	position: relative;
	left: 50%;
	top: 100px;
}
.face {	
	width: 200px;
	height: 200px;
	position: absolute;
	border: 1px solid;
}

#f1 {
    background-color: rgba(0, 255,255,0.35);
}
#f2 {
    transform:  translateZ(-100px) translateX(-100px) rotateY(90deg);
	background-color: rgba(0, 255,255,0.35);
}
#f3 {
    transform:  translateZ(-100px) translateX(100px) rotateY(90deg);
    background-color: rgba(0, 255,255,0.35);
}
#f4 {
    transform: translateZ(-200px);
	background-color: rgba(0, 255,255,0.35);
}
#f5 {
    transform: translateZ(-100px) translateY(100px) rotateX(90deg);
   	background-color: rgba(0, 255,255,0.35);
}
#f6 {
	transform: translateZ(-100px) translateY(-100px) rotateX(90deg);
	background-color: rgba(0, 255,255,0.35);
}

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"}