html,body {
	width:100%;
	height:100%;
}
* {
	margin:0;
	padding:0;
}
.box {
	position:absolute;
	height:200px;
	width:200px;
	top:50%;
	left:50%;
	margin-left:-100px;
	margin-top:-100px;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	box-sizing:border-box;
	transform:rotateX(45deg) rotateY(45deg);
	-ms-transform:rotateX(45deg) rotateY(45deg);
	-webkit-transform:rotateX(45deg) rotateY(45deg);
}
.box li {
	position:absolute;
	top:0;
	left:0;
	list-style:none;
	width:200px;
	height:200px;
	opacity:0.5;
}
.box li:nth-child(1) {
	background:#159DE3;
	transform:translateX(-100px) rotateY(90deg);
	-webkit-transform:translateX(-100px) rotateY(90deg);
	-ms-transform:translateX(-100px) rotateY(90deg);
}
.box li:nth-child(2) {
	background:red;
	transform:translateX(100px) rotateY(-90deg);
	-webkit-transform:translateX(100px) rotateY(-90deg);
	-ms-transform:translateX(100px) rotateY(-90deg);
}
.box li:nth-child(3) {
	background:orange;
	transform:translateZ(100px) rotateY(0deg);
	-webkit-transform:translateZ(100px) rotateY(0deg);
	-ms-transform:translateZ(100px) rotateY(0deg);
}
.box li:nth-child(4) {
	background:green;
	transform:translateZ(-100px) rotateY(0deg);
	-webkit-transform:translateZ(-100px) rotateY(0deg);
	-ms-transform:translateZ(-100px) rotateY(0deg);
}
.box li:nth-child(5) {
	background:pink;
	transform:translateY(-100px) rotateX(90deg);
	-webkit-transform:translateY(-100px) rotateX(90deg);
	-ms-transform:translateY(-100px) rotateX(90deg);
}
.box li:nth-child(6) {
	background:blue;
	transform:translateY(100px) rotateX(90deg);
	-webkit-transform:translateY(100px) rotateX(90deg);
	-ms-transform:translateY(100px) rotateX(90deg);
}