Untitled

dabblet.css

.cubo{
	position:relative;
	transform-style: preserve-3d;
	width: 100px;
	height: 100px;
	margin: 100px 100px;
	transform: rotateX(-10deg) rotateY(10deg);
}
.cubo-3d{
	position:absolute;
	width:100px;
	height:100px;
}
  
 .face-1{
	background-color:red;
	transform: translateZ(50px); 
}
.face-2{
	background-color:blue;
	transform: translateX(50px) rotateY(90deg);
}
.face-3{
	background-color: yellow;
	transform: translateX(-50px) rotateY(-90deg);

}
.face-4{
	background-color:green;
	transform: translateY(50px) rotateX(90deg);
}
.face-5{
	background: gray;
	transform: translateY(-50px) rotateX(-90deg);

}
.face-6{
	background: purple;
	transform: translateZ(-50px) rotateY(180deg);
}

dabblet.html

<div class="cubo">
	<div class="cubo-3d face-1"></div>
    <div class="cubo-3d face--2"></div>
    <div class="cubo-3d face-3"></div>
    <div class="cubo-3d face-4"></div>
    <div class="cubo-3d face-5"></div>
    <div class="cubo-3d face-6"></div>
</div>

settings.json

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