* {
	margin:0;
	padding:0;
	list-style:none
}
.box {
	width:300px;
	height:300px;
	border:1px solid red;
	margin:100px auto;
	perspective:1200px;
}
ul {
	width:200px;
	height:200px;
	border:1px solid red;
	margin:50px 50px;
	position:relative;
	transform-style:preserve-3d;
	animation:move 60s infinite linear;
	transform-origin:center center 100px
}
li {
	width:200px;
	height:200px;
	background:darkcyan;
	position:absolute
}
li:nth-last-of-type(1) {
	background:border-box;
}
li:nth-last-of-type(2) {
	background:darkgoldenrod;
	transform:translateX(200px) rotateY(-90deg);
	transform-origin:left
}
li:nth-last-of-type(3) {
	background:red;
	transform:translateX(-200px) rotateY(90deg);
	transform-origin:right
}
li:nth-last-of-type(4) {
	background:orchid;
	transform:translateY(200px) rotateX(90deg);
	transform-origin:top
}
li:nth-last-of-type(5) {
	background:grey;
	transform:translateY(-200px) rotateX(-90deg);
	transform-origin:bottom
}
li:nth-last-of-type(6) {
	background:chartreuse;
	transform:translateZ(200px);
	opacity:0.7
}
@keyframes move {
	from {
	transform:rotateY(0deg)
}
to {
	transform:rotateY(360deg)
}
}