* {
	margin:0;
	padding:0
}
ul {
	transform-style:preserve-3d;
	width:200px;
	height:200px;
	position:relative;
	margin:150px auto;
	list-style:none;
	animation-name:xz;
	animation-duration:10s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
ul:hover {
	animation-play-state:paused;
}
li {
	position:absolute;
	left:0;
	top:0;
	width:200px;
	height:200px;
	background:#ccc;
	opacity:.7;
}
li:hover {
	opacity:.3;
}
img {
	width:100%;
	height:100%;
}
.top {
	transform:rotateX(90deg) translateZ(100px);
}
.bottom {
	transform:rotateX(90deg) translateZ(-100px);
}
.left {
	transform:rotateY(90deg) translateZ(100px);
}
.right {
	transform:rotateY(90deg) translateZ(-100px);
}
.front {
	transform:translateZ(100px);
}
.back {
	transform:translateZ(-100px);
}
@keyframes xz {
	0% {
	transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
	transform:rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
}
}