.face{
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.frente {
	transform: translateZ(100px);
		background-color: yellow;

}
.direita {
	background-color: black;
	transform: translateX(100px) rotateY(90deg);
}
.esquerda {
	background-color: green;
	transform: translateX(-100px) rotateY(-90deg);
}
.cima {
	background-color: red;
	transform: translateY(-100px) rotateX(-90deg);
}
.baixo {
	background-color: blue;
	transform: translateY(100px) rotateX(90deg);
}
.atras {
	background-color: gray;
	transform: translateZ(-100px) rotateY(180deg) ;
}

.cubo{
	transform-style: preserve-3d;
	width: 200px;
	height: 200px;
	position: relative;
	top: 100px;
	left: 100px;
	transform: rotateX(10deg) rotateY(10deg);
}