* {
	margin:0;
	padding:0;
}
.wrap {
	width:600px;
	height:600px;
	/* 	border:1px solid black;
	*/
        				margin:100px auto 0;
}
img {
	height:200px;
	width:200px;
	opacity:0.8;
}
.box {
	width:200px;
	height:200px;
	margin-top:200px;
	margin-left:200px;
	position:relative;
	-webkit-transform-style:preserve-3d;
	animation:move 10s linear infinite alternate;
}
.box>div {
	position:absolute;
}
.left {
	transition:1s;
	transform:translateX(-100px) rotateY(90deg);
}
.right {
	transition:1s;
	transform:translateX(100px) rotateY(90deg);
}
.top {
	transition:1s;
	transform:translateY(-100px) rotateX(90deg);
}
.bottom {
	transition:1s;
	transform:translateY(100px) rotateX(90deg);
}
.after {
	transition:1s;
	transform:translateZ(-100px);
}
.befor {
	transition:1s;
	transform:translateZ(100px);
}
.wrap .box:hover .left {
	transform:translateX(-160px) rotateY(90deg);
	transition:1s;
}
.wrap .box:hover .right {
	transition:1s;
	transform:translateX(160px) rotateY(90deg);
}
.wrap .box:hover .top {
	transition:1s;
	transform:translateY(-160px) rotateX(90deg);
}
.wrap .box:hover .bottom {
	transition:1s;
	transform:translateY(160px) rotateX(90deg);
}
.wrap .box:hover .after {
	transform:translateZ(-160px);
	transition:1s;
}
.wrap .box:hover .befor {
	transform:translateZ(160px);
	transition:1s;
}
@keyframes move {
	from {
	transform:rotateX(0deg) rotateY(0deg);
}
to {
	transform:rotateX(30deg) rotateY(360deg);
}
}