body {
	background:black;
}
* {
	margin:0;
	padding:0;
}
.wrap {
	margin:100px auto;
	position:relative;
}
.wrap,.x,.y,.z {
	width:400px;
	height:400px;
	border-radius:50%;
}
.y,.z {
	position:absolute;
	top:0;
	left:0;
}
.x {
	border:1px solid red;
	position:relative;
	transform-style:preserve-3d;
	animation:play 6s infinite linear;
}
/*linear 匀速*/
			.y {
	border:1px solid pink;
	transform:rotateX(90deg);
}
.z {
	border:1px solid blue;
	transform:rotateY(90deg);
}
.x1,.x2,.y1,.y2,.z1,.z2 {
	width:87.5%;
	height:87.5%;
	position:absolute;
	border-radius:50%;
	top:6.25%;
	left:6.25%;
}
.x1 {
	border:1px solid green;
	transform:translateZ(100px);
}
.x2 {
	border:1px solid #fff;
	transform:translateZ(-100px);
}
.y1 {
	border:1px solid #d74646;
	transform:rotateX(90deg)translateZ(100px);
}
.y2 {
	border:1px solid #6600cc;
	transform:rotateX(90deg)translateZ(-100px);
}
.z1 {
	border:1px solid #b7669c;
	transform:rotateY(90deg)translateZ(100px);
}
.z2 {
	border:1px solid #efde81;
	transform:rotateY(90deg)translateZ(-100px);
}
.xInner,.yInner,.zInner {
	top:50%;
	width:100%;
	position:absolute;
}
.xInner {
	border:1px solid red;
}
.yInner {
	border:1px solid #31c844;
	transform:rotateX(90deg);
}
.zInner {
	border:1px solid orange;
	transform:rotateY(90deg);
}
@keyframes play {
	100% {
	transform:rotateX(360deg) rotateY(360deg);
}
}