* {
	margin:0;
	padding:0;
}
.box {
	width:500px;
	height:500px;
	position:relative;
	margin:200px auto;
	transform-style:preserve-3d;
	/*transition:20s;
	*/
				transform-origin:50% 50%;
	perspective:500;
	animation:abc 10s infinite;
}
@keyframes abc {
	from {
	transform:rotateY(0deg) rotateX(0deg) rotate(0deg);
}
to {
	transform:rotateY(360deg) rotateX(360deg) rotate(360deg);
}
}.box div {
	width:500px;
	height:500px;
	/*border:5px red solid;
	*/
                position:absolute;
	box-sizing:border-box;
	/*transform-origin:50% 50%;
	*/
               opacity:0.5;
}
.box div:nth-child(1) {
	transform:translateX(250px)rotateY(90deg);
	background:yellow;
}
.box div:nth-child(2) {
	transform:translateX(-250px)rotateY(90deg);
	background:darkred;
}
.box div:nth-child(3) {
	transform:translateY(250px)rotateX(90deg);
	background:blueviolet;
}
.box div:nth-child(4) {
	transform:translateY(-250px)rotateX(90deg);
	background:gold;
}
.box div:nth-child(5) {
	transform:translateZ(250px);
	background:green;
}
.box div:nth-child(6) {
	transform:translateZ(-250px);
	background:lightblue;
}
.box div:nth-child(7) {
	transform:translateZ(-250px);
	width:500px;
	height:500px;
	border-radius:50%;
	background:lightblue;
}