.picture-outbox{
	width: 50px;
	height: 50px;
	margin: 50px;
	position: relative;
	transform-style: preserve-3d;
	transform: transform 1s ease-in;
	animation: rotateAnimate 10s linear infinite;
}
.picture-outbox>div{
	width: 50px;
	height: 50px;
	position: absolute;
}
@keyframes rotateAnimate{
	0%{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	100%{
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
.out-front{
	transform: translateZ(25px);
}
.out-back{
	transform: translateZ(-25px) rotateY(180deg);
}
.out-left{
	transform: translateX(-25px) rotateY(-90deg);
}
.out-right{
	transform: translateX(25px) rotateY(90deg);
}
.out-top{
	transform: translateY(-25px) rotateX(90deg);
}
.out-bottom{
	transform: translateY(25px) rotateX(-90deg);
}

.cube:hover .out-front{
	transform:translateZ(50px)
}
.cube:hover .out-back{
	transform: translateZ(-50px) rotateY(180deg);
}
.cube:hover .out-left{
	transform: translateX(-50px) rotateY(-90deg);
}
.cube:hover .out-right{
	transform: translate(50px) rotateY(90deg);
}
.cube:hover .out-top{
	transform: translateY(-50px) rotateX(90deg);
}
.cube:hover .out-bottom{
	transform: translateY(50px) rotateX(-90deg);
}