.box {
	width:200px;
	height:200px;
	transform-style:preserve-3d;
	position:relative;
	margin:100px auto 20px;
	transform:rotateX(20deg) rotateY(20deg);
	cursor:pointer;
	transition:all 1s;
}
.box:hover {
	transform:rotateX(20deg) rotateY(230deg)
}
.box div {
	width:200px;
	height:200px;
	text-align:center;
	line-height:200px;
	font-size:100px;
	font-weight:bolder;
	color:#fff;
	/* 让6个面全部定位在父元素里面 */
				position:absolute;
	left:0;
	top:0;
	opacity:0.5;
	/* 透明 */
				border:2px solid #000;
	transition:all 1s ease;
}
.box div:nth-child(1) {
	transform:translateZ(100px);
	background-color:rgba(36,85,75,0.5);
}
.box:hover div:nth-child(1) {
	transform:translateY(100px) translateZ(100px);
}
.box div:nth-child(2) {
	transform:translateZ(-100px) rotateY(180deg);
	background-color:rgba(36,255,1,0.5);
}
.box:hover div:nth-child(2) {
	transform:translateZ(-100px) translateY(100px)  rotateY(180deg);
}
.box div:nth-child(3) {
	transform:translateX(-100px) rotateY(-90deg);
	background-color:rgba(25,62,75,0.5);
}
.box:hover div:nth-child(3) {
	transform:translateX(-100px) rotateY(-90deg);
}
.box div:nth-child(4) {
	transform:translateX(100px) rotateY(90deg);
	background-color:rgba(25,62,75,0.5);
}
.box:hover div:nth-child(4) {
	transform:translateX(100px) rotateY(90deg);
}
.box div:nth-child(5) {
	transform:translateY(100px) rotateX(90deg);
	background-color:rgba(255,62,26,0.5);
}
.box:hover div:nth-child(5) {
	transform:translateY(100px) translateY(100px) rotateX(90deg);
}
.box div:nth-child(6) {
	transform:translateY(-100px) rotateX(-90deg);
	background-color:rgba(255,62,26,0.5);
}
.box:hover div:nth-child(6) {
	transform:translateY(-100px) rotateX(-90deg);
}