.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;
}

*/