*{margin:0;padding:0;}
@keyframes zhuan{
	from{
		transform: rotateX(0deg) rotateY(0deg);	
	}
	to{
		transform: rotateX(360deg) rotateY(360deg);		
	}
	
}
body{
	background-color: #000;
}
.box_div{
	position: absolute;
	left:50%;
	top:50%;
	width:400px;
	height:400px;
	background:url(img/a3.png) no-repeat scroll center center /100%  auto;
	margin:-200px 0 0 -200px;
	transform-style:preserve-3d;
	animation:zhuan 10s 0s linear infinite none;
}
.box_div div{
	position:absolute;
	width:400px;
	height:400px;
	opacity:.8;
	transition: all .4s;
}
.box_div div img{
	width:100%;
	height:100%;
}

.front{
	transform:translateZ(200px);
	background-color:green;
}
.back{
	transform:translateZ(-200px);
	background-color:blue;
}
.left{
	transform: translateX(-200px) rotateY(90deg);
    background-color: black;
}
.right{
	transform: translateX(200px) rotateY(90deg);
    background-color:black;
}
.top{
	transform: translateY(200px) rotateX(90deg);
    background-color:#975798;
}
.bottom{
	transform: translateY(-200px) rotateX(90deg);
    background-color:purple;
}

.box_div:hover .front{
	opacity:1;
	transform:translateZ(400px)
}
.box_div:hover .back{
		opacity:1;
	transform:translateZ(-400px);
}
.box_div:hover .left{
		opacity:1;
	transform: translateX(-400px) rotateY(90deg);
}
.box_div:hover .right{
		opacity:1;
	transform: translateX(400px) rotateY(90deg);
}
.box_div:hover .top{
		opacity:1;
	transform: translateY(400px) rotateX(90deg);
}
.box_div:hover .bottom{
		opacity:1;
	transform: translateY(-400px) rotateX(90deg);
}